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

vue项目创建与MongoDBD的使用

一、创建vue项目（day18）

vue create 项目名称

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

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

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

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

四、开始创建后台

1、创建路由模块

2、创建服务器

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

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文件用来封装路径

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

在封装的请求中引用使用路径

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方式发送数据（简单）

后端接收
接收语法：req.query.xxx

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

形参的方式返回给后端

Post方式接收数据(麻烦)

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

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

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

Md5加密

1.下载crypto模块：封装了一系列密码学相关的功能 npm i crypto --save下载
2.引用
3.使用
crypto.createHash(‘md5’).update(加密数据).digest(‘hex’);

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

1、创建db文件夹 用来封装数据库连接操作

2、在需要使用数据库操作的页面中进行引用于使用 在这里是注册操作

day18