上个月写了一篇文章是 express+MongoDB+vue 实现增删改查. 只是简单的实现了增删改查功能, 那么今天是在那个基础之上做了扩展, 首先实现的功能有如下:
1. 支持注册, 登录功能, 用户可以注册完成后, 进行登录, 登录完成后会进入到列表增删改查页面.
2. 支持 session 会话, 也就是说设置了多长时间登录过期, 如果用户没有登录, 直接进查询列表页面, 会重定向到登录页面去, 如果用户登录了后, 把浏览器关掉, 直接输入列表查询页面, 会直接进入列表页面的.
3. 列表数据加入了分页功能.
4. 对数据库中的请求加入了日志记录.
该代码和之前的实现增删改查代码, 目录有所调整, 目的想文件目录更加清晰. 我们在讲解之前, 还是和之前一样, 先看下效果:
1. 首先服务器重启后, 在地址栏中输入 http://localhost:8081/ 后, 会重定向到登录页面来, 如下图所示:
2. 如果没有账号的话, 我们可以注册一个账号, 进入注册页面, 如下图所示:
3. 如果用户名和密码没有输入, 或者输入的格式不合法的话, 会如下提示所示:
4. 当用户注册成功后, 可以看到如下页面了
5. 我们去登录页面, 进行登录, 如下:
6. 登录成功后, 会跳转到列表页面, 如下图所示:
下面的增删改查操作的流程, 我就不再介绍了, 和我之前的 express+MongoDB+vue 实现增删改查中的演示是一样的.
7. 下面我们来看看我们的数据库中是否增加了刚刚注册的用户账号了, 如下图所示:
上面的四个账号都是我注册的, 在数据库中可以看到, 注册成功了.
注意: 如果某个用户注册过了, 你再使用相同的账号继续注册话, 是不能注册, 会提示该账号已经注册过了, 如下图所示:
下面还是来看下我们项目的整个目录架构如下:
- ### 目录结构如下:
- demo1 # 工程名
- | |--- dist # 打包后生成的目录文件
- | |--- node_modules # 所有的依赖包
- | |----database # 数据库相关的文件目录
- | | |---db.JS # mongoose 类库的数据库连接操作
- | | |---models # 存放所有模型表
- | | | |--- user.JS # 增删改查用户数据表
- | | | |--- userTable.JS # 用户账号表
- | |--- App
- | | |---index
- | | | |-- views # 存放所有 vue 页面文件
- | | | | |-- list.vue # 列表数据
- | | | | |-- index.vue
- | | | | |-- login.vue # 用户登录页面
- | | | | |-- regist.vue # 用户注册页面
- | | | |-- components # 存放 vue 公用的组件
- | | | |-- JS # 存放 JS 文件的
- | | | |-- CSS # 存放 CSS 文件
- | | | |-- store # store 仓库
- | | | | |--- actions.JS
- | | | | |--- mutations.JS
- | | | | |--- state.JS
- | | | | |--- mutations-types.JS
- | | | | |--- index.JS
- | | | | |
- | | | |-- App.JS # vue 入口配置文件
- | | | |-- router.JS # 路由配置文件
- | |--- API # 保存所有接口操作的文件
- | | |--- addAndDelete.JS # 增删改查的接口
- | | |--- regAndLogin.JS # 注册登录的接口
- | | |--- userSession.JS # 用户 session 有效的接口
- | |--- routes # 存放所有的路由文件
- | | |--- addAndDelete.JS # 增删改查路由
- | | |--- regAndLogin.JS # 注册和登录路由
- | | |--- userSession.JS # session 路由
- | |--- views
- | | |-- index.html # HTML 文件
- | |--- webpack.config.JS # webpack 配置文件
- | |--- .gitignore
- | |--- README.md
- | |--- package.JSON
- | |--- .babelrc # babel 转码文件
- | |--- App.JS # express 入口文件
首先我们先看下 根目录下的 App.JS 文件代码 (服务器代码):
部分代码如下:
- // 引入 express 模块
- const express = require('express');
- // 引入 session
- const session = require('express-session');
- // 创建 App 对象
- const App = express();
- // 加载路由
- const addAndDelete = require('./routes/addAndDelete');
- const regAndLogin = require('./routes/regAndLogin');
- const userSession = require('./routes/userSession');
- const bodyParser = require("body-parser");
- const fs = require('fs');
- const path = require('path');
- // mongoose-morgan
- const morgan = require('mongoose-morgan');
- App.use(bodyParser.JSON());
- App.use(bodyParser.urlencoded({ extended: false }));
- App.use(session({
- secret: 'kongzhi', // 对 session id 相关的 cookie 进行加密签名
- cookie: {
- maxAge: 1000 * 60 * 10 // 设置 session 的有效时间, 单位为毫秒, 设置有效期为 10 分钟
- }
- }));
- // Logger 添加数据库操作日志记录 https://www.npmjs.com/package/mongoose-morgan
- App.use(morgan({
- connectionString: 'mongodb://localhost:27017/dataDb'
- }));
- // 使用
- App.use('/user', addAndDelete);
- App.use('/reglogin', regAndLogin);
- App.use('/user', userSession);
如上代码, 加载路由后, 然后使用 use 了, 对应的 routes 文件下的 JS 文件, 代码分别如下:
1. routes/addAndDelete.JS 代码如下:
- // 引入 express 模块
- const express = require('express');
- const router = express.Router();
- // 引入 user.JS
- const User = require('../api/addAndDelete');
- router.post('/add', User.add);
- router.post('/query', User.query);
- router.post('/del', User.del);
- router.post('/update', User.update);
- module.exports = router;
2. routes/regAndLogin.JS 代码如下:
- const express = require('express');
- const router = express.Router();
- const RegAndLogin = require('../api/regAndLogin');
- router.post('/regist', RegAndLogin.registered);
- router.post('/login', RegAndLogin.login);
- // 注销
- router.post('/logout', RegAndLogin.logout);
- module.exports = router;
3. routes/userSession.JS 代码如下:
- const express = require('express');
- const router = express.Router();
- const userSession = require('../api/userSession');
- router.post('/usersession', userSession.usersession);
- module.exports = router;
因此对于 App.use('/user', addAndDelete); 的时候, 会调用 routes/addAndDelete.JS 下的请求方法, 分别为:
/add, /query, /update, /del, 因此在我们列表页面中使用接口方式如: 类似于如下这样的:
都是 /user/add, /user/query, /user/update, /user/del 这样的接口, 比如说我们使用 /user/add post 请求这样的接口的时候, 他们会调用到 routes/addAndDelete.JS 中的 router.post('/add', User.add); 这里面的 User.add 方法, 所以它就会调用到 API/addAndDelete.JS 中的 add 函数, 如下代码所示:
- const User = require('../database/models/user');
- // 新增信息
- module.exports.add = function(req, res, next) {
- const user = new User({
- name: req.body.name,
- age: req.body.age,
- sex: req.body.sex
- });
- user.save((err, docs) => {
- if (err) {
- res.send({ 'code': 1, 'errorMsg': '新增失败' });
- } else {
- res.send({ "code": 0, 'message': '新增成功' });
- }
- });
- next();
- };
因此会调用数据库的操作, 会在数据库中增加一条数据. 如上代码, 会应用到 database/models/user 这个表中的代码:
- /*
- 定义一个 user 的 Schema
- */
- const mongoose = require('../db.js');
- const Schema = mongoose.Schema;
- // 创建一个模型
- const UserSchema = new Schema({
- name: { type: String}, // 属性 name, 类型为 String
- age: { type: Number, default: 30 }, // 属性 age, 类型为 Number, 默认值为 30
- sex: { type: String }
- });
- // 导出 model 模块
- const User = module.exports = mongoose.model('User', UserSchema);
因此会创建 user 表, 并且在表中插入对应的数据.
如上只是解释下增加接口的调用方式, 其他的接口设计也是一样的. 就不多解释了. 对应 /user 这样的, 我们在 webpack 中的 devServer 中会配置下, 解决跨域问题, 因为我现在是启动两个服务的, node 端的端口是 3001, 而我的 webpack 的端口是 8081, 会存在跨域的, 因此 webpack 的 devServer 需要做如下配置的:
- devServer: {
- port: 8081,
- // host: '0.0.0.0',
- headers: {
- 'X-foo': '112233'
- },
- inline: true,
- overlay: true,
- stats: 'errors-only',
- proxy: {
- '/user': {
- target: 'http://127.0.0.1:3001',
- changeOrigin: true // 是否跨域
- },
- '/combineFile': {
- target: 'http://127.0.0.1:3001',
- changeOrigin: true, // 是否跨域,
- pathRewrite: {
- '^/combineFile' : '' // 重写路径
- }
- },
- '/reglogin': {
- target: 'http://127.0.0.1:3001',
- changeOrigin: true // 是否跨域
- }
- }
- },
4. App.JS 中使用了 mongoose-morgan 这个插件, 为了数据库操作接口的时候, 写入日志, 比如报错的时候可以在服务器端看到报错信息, 该 API 的具体使用可以
看下 NPM 库 ( https://www.npmjs.com/package/mongoose-morgan ).
如下日志记录:
具体的代码这边就不多解释, 有兴趣的话可以去 GitHub 上下载代码查看下哦.
查看 GitHub 上源码
来源: https://www.cnblogs.com/tugenhua0707/p/10074148.html