首先实现的功能是登录、注册，使用 `mongoose` 构建用户数据库模型，使用 `koa-router` 构建相关 API ，使用 `axios` 作为 API 请求工具 # 构建服务端 API 首先构建用户数据库模型，主要包括五项内容: 用户名(username), 邮箱(email), 密码(password),是否为管理员(isAdmin)以及注册时间(createdAt) 在 `server` 目录下创建 `models` 目录，并在目录中创建 `user.js`文件，添加代码: 创建模型和添加登录、注册的静态方法，同时会添加一个管理账户 ``` import mongoose from 'mongoose' import moment from 'moment' import { md5 } from '../utils' moment.locale('zh-cn') // 创建 user schema const userSchema = new mongoose.Schema({ // type 表示值的类型, String 为字符串 // required 表示值是否为必须, true 表示不为空 // default 表示默认值 username: { type: String, required: true }, email: { type: String, required: true}, password: { type: String, required: true}, isAdmin: { type: Boolean, default: false }, createdAt: { type: Date, default: Date.now }, }, { toJSON: { virtuals: true } }) // 使用 moment 格式化注册时间 userSchema.virtual('prettyCreatedAt').get(function() { return moment(this.createdAt).format('ll') }) // 通过 statics 给 model 添加静态方法 // 用户注册 userSchema.statics.add = async function(ctx, user) { let document = await this.findOne({ email: user.email }) if (document) { return { ok: false, msg: '此邮箱已注册' } } let docuemnt_2 = await this.findOne({ username: user.username }) if (docuemnt_2) { return { ok: false, msg: '此用户名已存在'} } user.password = md5(user.password) await user.save() if (ctx) { // 用户注册成功后添加到 session // 是用户注册后自动登录 // 在 session 中不保存用户的密码 user.password = null ctx.session.user = user } return { ok: true, msg: '注册成功', user} } // 用户登录 userSchema.statics.login = async function(ctx, email, password) { let user = await this.findOne({ email }) if (user) { if (md5(password) === user.password) { user.password = null ctx.session.user = user return { ok: ture, msg: '登录成功', user} } return { ok: false, msg: '密码错误'} } return { ok: false, msg: '邮箱未注册'} } let User = mongoose.model('User', userSchema); // 添加 admin 用户 // 邮箱: admin@taokexia.com // 密码: admin // 添加默认管理员 User.findOne({ isAdmin: true }).then(user => { // 如果已经存在管理员则不再添加 if (user) { return false } const admin = new User({ username: 'admin', email: 'admin@taokexia.com', password: md5('admin'), isAdmin: true, }) admin.save() }) export { User } ``` 在 `models` 中创建 `index.js` 并输入代码: ``` // 导出 User export { User } from './user' ``` 在`user.js`中使用到了 `utils` 引入的加密函数。在 `server` 中创建 `utils` 文件夹，在 `utils` 中新建 `md5.js` 并输入代码: ``` import crypto from 'crypto' // md5 加密 const md5 = str => crypto .createHash('md5') .update(str) .digest('hex') export { md5 } ``` 在 `utils` 中创建 `index.js` 导出 `md5` 函数 ``` //导出md5函数 export { md5 } from './md5' ``` # 创建 API 在 `server` 中创建 `api` 文件夹用于存放 API 相关文件，在 `api` 中创建 `user.js`, 添加代码: ``` import { User } from '../models' // 通过 koa-router 创建 api 路由 // 返回的数据均为 json export default function (router) { // 登录 router.post('/api/signin', async (ctx, next) => { // 解析 request body 中的参数 let { email, password } = ctx.request.body ctx.body = await User.login(ctx, email, password) }); // 注册 router.post('/api/signup', async (ctx, next) => { let { username, email, password, repassword } = ctx.request.body if (password !== repassword) { ctx.body = { ok: false, msg: '两次密码不一样'}; } else { let usr = new User({ username, email, password, }) ctx.body = await User.add(ctx, user) } }) //获取当前登录用户 router.get('/aip/user', async (ctx, next) => { if (ctx.session.user) { ctx.body = { ok: true, msg: '已登录', user: ctx.session.user } } else { ctx.body = { ok: false, msg: '未登录' } } }) // 退出登录 router.get('/api/logout', (ctx, next) => { //删除用户的 session 即可退出登录 delete ctx.session.user ctx.body = { ok: true, msg: '退出成功' } }) } ``` 在 `api` 中创建 `index.js` 添加代码: ``` import user from './user' export default function(router) { user(router) } ``` 之后在 routes 中初始化 API, 修改 `server/routes/index.js`代码为: ``` import { resolve } from 'path' import fs from 'fs' import Router from 'koa-router' // 导入api import genAPI from '../api' export default function(app) { const router = new Router() // 初始化 API // 初始化 API 一定要放在渲染模板之前 // API 之外的路由都会转到模板渲染 genAPI(router) // 所有路由都渲染到此模板 // 以便把路由交给 Vue 管理 router.get('*', async (ctx, next) => { const template = fs.readFileSync(resolve(__dirname, '../views/index.html'), 'utf-8'); ctx.body = template; }); app.use(router.routes()) .use(router.allowedMethods()) } ``` # 编写登录与注册组件 ## 定义 API 通过 `axios` 作为请求 API 的工具, axios 是基于 Promise 的 http 客户端工具。在 `client` 目录中创建 `api` 文件夹，并在 `api` 目录内创建 `index.js` 文件并输入代码: ``` import axios from 'axios' // 创建 axios 实例 //每一个 axios 请求都返回一个 Promise const fetch = axios.create({ baseURL: '/api/', time: 1000, withCredentials: true //使请求时提供数据，也就是 cookie }) // 对应 Koa 中实现的 API 接口地址 const user = { getUser: 'user', signin: 'signin', signup: 'signup', logout: 'logout', } export { fetch, user, } ``` ## 使用 vuex 保存用户登录状态使用 vuex 保存用户登录信息以及状态，编写组件前先创建用户的 store。在 `client` 目录下创建 `store` 文件夹，在 `store` 中创建 `mutation-types.js`文件添加代码: ``` // 定义常量作为 mutations 的事件类型 export const SIGN_USER = 'SIGN_USER' ``` 在 `store` 中创建 `modules` 文件夹,在 `modules` 文件夹中创建 `user.js` 文件并输入代码 ``` import * as types from '../mutation-types' import { fetch, user as userUrls } from '../../api' const state = { //用于存储状态数据 data: {} } const getters = { //可以对 state 中的数据进行一些处理，类似于 Vue 组件中的计算属性。 currentUser: state => state.data } // 定义更改状态数据的方法，必须是同步函数，更改 store 中数据的唯一方法是提交 mutation。 const mutations = { // 可以使用 ES6 风格的计算属性命名功能来使用一个常量作为函数 [types.SIGN_USER](state, { data }) { state.data = data } } //和 mutations 类似，但是 action 是通过提交 mutation 更改数据的. //action 可以包含异步操作，所以请求 API 是在 action 中完成的而不是 mutation。 const actions = { // 获取当前登录的用户 async getUser({ commit }) { let res = await fetch.get(userUrls.getUser) commit({ types: type.SIGN_USER, data: res.data }) }, // 用户登录 async signin({ commit }, { user }) { let res = await fetch.post(userUrls.signin, user) commit({ type: types.SIGN_USER, data: res.data }) }, // 用户注册 async signup({ commit }, { user }) { let res = await fetch.post(userUrls.signup, user) commit({ type: types.SIGN_USER, data: res.data }) }, // 退出登录 async logout({ commit }) { let res = await fetch.get(userUrls.logout) commit({ type: types.SIGN_USER, data: {} }) } } export default { state, getters, mutations, actions } ``` 在 `store` 文件夹中创建 `index.js`,添加代码: ``` import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' Vue.use(Vuex) // 创建 store 实例 export default new Vuex.Store({ modules: { user, } }) ``` 在 `client/app.js` 中引入 store, 修改代码: ``` import 'babel-polyfill' import Vue from 'vue' import VueHead from 'vue-head' import App from './components/app.vue' import router from './router' // 引入 store import store from './store' Vue.use(VueHead) // 创建 vue 实例,并渲染组件 const app = new Vue({ el: '#app', router, // 传入 router 给 Vue app store, // 传入 store 给 Vue app render: h => h(App) }); ``` ## 编写登录注册组件在编写登录注册之前，先编写一个 `model` 组件，登录与注册时都需要弹出 `model` 框，组件放在 `model` 里面。在 `client/components` 中创建 `modal.vue`并添加代码: ``` ``` 注册 modal 组件，在 `client.app.js` 中添加代码注册组件: ``` import 'babel-polyfill' import Vue from 'vue' import VueHead from 'vue-head' import App from './components/app.vue' // 注册 modal 组件 import modal from './components/modal.vue' import router from './router' import store from './store' Vue.use(VueHead) // 注册 modal 组件 Vue.component('modal', modal) const app = new Vue({ el: '#app', router, // 传入 router 给 Vue app store, // 传入 store 给 Vue app render: h => h(App) }); ``` 最后在 `components/nav.vue` 中使用 modal 组件,修改代码: ``` ```

“Vue.js+Koa.js+MongoDB打造“什么值得买”网站”实验报告