vue项目创建与MongoDBD的使用&& Md5加密

骑猪看日落 2022-12-05 10:25 31阅读 0赞

# vue项目创建与MongoDBD的使用 #

### 一、创建vue项目（day18） ###

vue create 项目名称

### 二、创建后台并下载 express 和 mongoose ###

![在这里插入图片描述][20200909231807497.png_pic_center]

###### 如上图myapp为创建的项目，server为后台 ######

将express 和 mongoose下载至后台中  
普通下载  
npm install --save express mongoose  
淘宝镜像  
cnpm install --save express mongoose

### 三、先来设置数据库（使用可视化数据库管理工具进行数据库的创建与集合的创建） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]

### 四、开始创建后台 ###

##### 1、创建路由模块 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]

##### 2、创建服务器 #####

##### 3、在服务器中配置路由模块 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]

var express = require("express")
    var server = express()
    var rlogin = require("./router/rlogin.js")
    var rzhuce = require("./router/rzhuce.js")
    // 解决跨域
    server.use("/", (req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
    
     res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length,     Authorization, Accept, X-Requested-With , yourHeaderFeild');
    
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
        next()
    })
    server.use("/rlogin", rlogin)
    server.use("/rzhuce", rzhuce)
    server.listen(3000)

##### 4、在前台也就是vue中先把这两个接口测试一下 #####

（1）由于是一个空项目所以 咱们需要把 这个空项目先设置好相关的登录页面与注册页面 并且配置好登录和注册的相关路由  
（2）开始设置拦截器 先要下载axios  
npm install --save axios

###### 在src下创建util文件在，并在此文件夹下创建一个js文件设置拦截器 ######

注：一下代码是固定写法，不用记，可以直接去axios官网复制，或者用下面的都可以

import axios from "axios"
    // 创建axios 赋值给常量service
    const service = axios.create();
    
    
    // 添加请求拦截器（Interceptors）
    service.interceptors.request.use(function(config) {
        // 发送请求之前做写什么
        return config;
    }, function(error) {
        // 请求错误的时候做些什么
        return Promise.reject(error);
    });
    
    
    // 添加响应拦截器
    service.interceptors.response.use(function(response) {
        // 对响应数据做点什么
        return response;
    }, function(error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    export default service

##### 5、将url也进行封装 #####

###### 在util目录下创建一个js文件用来封装路径![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3] ######

#### 6、设置请求封装，在src目录下创建api文件夹 ####

在封装的请求中引用使用路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]

##### 7、解决跨域 #####

注：跨域上面已经写过，但是要注意的是，最后一定要加**next()**

res.header('Access-Control-Allow-Origin', '*');
    
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    
     res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');

###### 前台都需要吧数据发送给后台 那么后台才可以往数据库进行存储 ######

#### 前端vue 如何通过axios发送数据 ####

##### Get方式发送数据（简单）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5] #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]

后端接收  
接收语法：req.query.xxx  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]

##### post方式发送数据（难一些） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]  
形参的方式返回给后端  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]

#### Post方式接收数据(麻烦) ####

1.需要下载body-parser模块用来解析接受过来的数据 npm install --save body-parser  
2.需要在想使用的地方进行引用  
3.调用解析功能  
4.把这个解析功能的变量插入到路由中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]

###### 现在前台和后台已经可以正常的使用get/post来进行数据的传递了 ######

在这个时候我们需要完成登录和注册的功能 那么需要把数据往数据库中进行存储  
但是在存储之前 我们要考虑 存储的密码 需要加密

#### Md5加密 ####

1.下载crypto模块：封装了一系列密码学相关的功能 npm i crypto --save下载  
2.引用  
3.使用  
crypto.createHash(‘md5’).update(加密数据).digest(‘hex’);  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]

#### 数据已经准备好了 那么接下来就开始往数据库中进行存储 ####

1、创建db文件夹 用来封装数据库连接操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]  
2、在需要使用数据库操作的页面中进行引用于使用 在这里是注册操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]  
day18

[20200909231807497.png_pic_center]: /images/20221123/f023371fd656477f95a6f62c774bd340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4a70fa80e1f741bd83e9182578964000.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/513da6a11db14ab5bddb7cf1760ddb31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/746657a673654f7eb31fbac67524430f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/076332aeb5ae4765ba52cd44283cb245.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/709e24a0ee3043bf9725127bfd342894.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/f8ccf6f29adb4f26ba3ede698ae1227e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/35e79c47604141cd835de351dda7ecf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/ad9bbd001dea401a87b87a5ebb8f80f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/11d7a0d5808f48078f74eb8007ba63af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/f0d5e0de07db425b88c02450ac5f432f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/528247da46b04dfbb9f21e81ae6a8726.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/10540a64abf141c19c9e2f226ae491d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/bf30f731b85943ea996c3d2da1812675.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/4a88e34e3d714aacab518096abf0298c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODY1MzQ4MA_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/b30a120e923b42f9a55ccc99d99b4edb.png