VueCli3.x全栈开发-微信朋友圈(node/express/mongodb/vuecli3.x)

1.项目演示

2.express 搭建服务器

2.1.初始化项目

$ npm int 

2.2.安装自动重启工具nodemon

$ npm install -g nodemon

2.3.修改package.json中的script:

"scripts": {
   
    "start":"node server.js",  
    "server":"nodemon server.js"
  },
 这样意义：当 执行命令 npm run start 时相当于 执行node server,同理可知第二个

2.4安装 express

$ npm install --save express

2.5.创建 server.js

const express = require("express");
const app = express();

app.get("/",(req,res)=>{
   
    res.send("Hello world");
});

const port = process.env.PORT || 5000;

app.listen(port,()=>{
   
    console.log(`服务器在端口${
     port}跑起来了`);
});

2.6. 执行命令 nodemon server.js

可见成功了。。

3.node接口搭建-连接mongodb数据库

3.1安装mongoose

$ npm install --save mongoose

3.2.引入mongoose，并连接数据库

    const mongoose = require("mongoose");
    
    //连接数据库
    mongoose.connect('mongodb+srv://test:密码@cluster0-cjcbk.mongodb.net/test?retryWrites=true&w=majority', {
    useNewUrlParser: true } ).then(()=>{
   
        console.log("mongoDB连接上了");
    }).catch(err=>{
   
        console.log(err);
    });

4.搭建路由和数据模型

4.1.创建路由routes/api/user.js

const express = require("express");
const router = express.Router();

router.get("text",(req,res)=>{
   
    res.json({
   msg:"测试成功"});
});

module.exports = router;

并在serve.js中引入 users，并使用routes

const user = require("./routes/api/users");
//使用routes
app.use("/api/users",user);//使用api/users时找到user中的路由，

4.2.创建数据模型 model/User.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const UserSchema = new Schema({
   
    name:{
   
        type:String,
        required:true
    },
    email:{
   
        type:String,
        required:true
    },
    password:{
   
        type:String,
        required:true
    },
    avatar:{
   
        type:String,
    },
    date:{
   
        type:Date,
        required:Date.now
    },
});

module.exports = User = mongoose.model("users",UserSchema);

5.搭建注册接口并保存数据

5.1.先引入 body-parser，来解析请求的json；

$ npm install --save body-parser

在server.js 中 引入 并使用 body-parser的中间件

const bodyParser = require('body-parser');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
    extended: false }))
 
// parse application/json
app.use(bodyParser.json())

5.2.要加密密码，用到bcrypt在users.js中引入

$ npm install --save bcrypt

users.js中

const bcrypt = require("bcrypt");

安装时发生错误，于是改成安装bcryptjs

5.3.要用到全球公认头像gravatar，在users.js中引入

npm install --save gravatar
const gravatar = require("gravatar");

5.4.编写注册接口

/**
 * @route POST api/users/test
 * @desc 返回的请求的json数据
 * @access public
 */
router.post("/register",(req,res)=>{
   
   User.findOne({
   email:req.body.email})
       .then((user)=>{
   
           if(user){
   
               res.status(400).json("该邮箱已经被注册");
           }else{
   
               const avatar = gravatar.url(req.body.email, {
   s: '200', r: 'pg', d: 'mm'});
               let newUSer = new User({
   
                   name:req.body.name,
                   email:req.body.email,
                   password:req.body.password,
                   date:new Date(),
                   avatar
               });
               bcrypt.genSalt(10, function(err, salt) {
   
                   bcrypt.hash(newUSer.password, salt, (err, hash)=> {
   
                       if(err) throw err;
                       newUSer.password = hash;
                       newUSer.save()
                           .then(user=>{
   res.json(user)})
                           .catch(()=>{
   console.log(err);})
                   });
               });
           }
       })
});

6.搭建登陆接口

6.1 用jwt实现返回token

$ npm install jsonwebtoken --save

const jwt = require("jsonwebtoken");

/**$登录接口
 * @route POST api/users/login
 * @desc 返回token
 * @access public
 */
router.post("/login",(req,res)=>{
   
    const email = req.body.email;
    const password = req.body.password;
    User.findOne({
   email})
        .then(user =>{
   
            if(!user){
   
                return res.status(404).json({
   email:"用户不存在"});
            }
            bcrypt.compare(password,user.password)
                .then(isMatch =>{
   
                    if(isMatch){
   
                        const rule = {
   id:user.id,name:user.name,avatar: user.avatar};
                        jwt.sign(rule,"secret",{
   expiresIn:3600},(err,token)=>{
   
                            if (err) throw err;
                            res.json({
   
                                success:true,
                                token:"Bearer "+token
                            })
                        });
                        // res.json({msg:"sucess"})
                    }else{
   
                        return res.status(400).json({
   password:"密码错误"});
                    }
                })
        })

});

7.使用passport-jwt 验证token

使用passport-jwt和passport中间件来验证token，passport-jwt是一个针对jsonwebtoken的插件，passport是express框架的一个针对密码的中间件

那么首先还是需要安装passport-jwt和possport

$ npm install passport-jwt
$ npm install passport

然后在入口文件server.js中引入passport

const passport = require("passport");       //引入passport插件

在入口文件中初始化passport

app.use(passport.initialize());     //passport初始化

app.use(passport.initialize()); //passport初始化

app.use(passport.initialize());     //passport初始化

接下来我们还需要对passport进行一些配置，所以在config下面新建一个passport.js文件。然后将此文件在入口文件中引入

require("./config/passport")(passport);

然后在passport文件中，我们需要使用passport-jwt中间件，所以我们需要在passport中引入passport-jwt、mongoose、keys.js、models/Users.js

const JwtStrategy = require('passport-jwt').Strategy,
    ExtractJwt = require('passport-jwt').ExtractJwt;

const mongoose = require("mongoose");
const Users = mongoose.model("users");
// const keys = require("../config/keys");

const opts = {
   };
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = "secret";

module.exports = passport => {
   
    passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
   
        Users.findById(jwt_payload.id)
            .then(user => {
   
                if (user) {
   
                    return done(null, user);
                }
                return done(null, false)
            })
            .catch(err => {
   
                console.log(err);
            })
        // console.log(jwt_payload);
    }));

随后在api/user.js中做密码的验证，首先在文件中引入passport

const passport = require("passport");     //引入passport中间件

router.get("/current",passport.authenticate("jwt",{
   session:false}),(req,res)=>{
   
    res.json({
   
        id:req.user.id,
        name:req.user.name,
        email:req.user.email,
        avatar:req.user.avatar
    })
});

7.配置朋友圈信息接口，创建模型Profile(过程于User类似)，创建profiles（过程与users类似）；

8.创建朋友圈接口

/**$登录接口
 * @route POST api/profiles/add
 * @desc 创造朋友圈信息接口
 * @access private
 */

router.post("/add",passport.authenticate("jwt",{
   session:false}),(req,res)=>{
   
    const profilesFields = {
   };
    if(req.body.img) profilesFields.img = req.body.img;
    if(req.body.name) profilesFields.name = req.body.name;
    if(req.body.text) profilesFields.text = req.body.text;
    if(req.body.imgs) profilesFields.imgs = req.body.imgs.split("|");
    profilesFields.date=new Date();
    new Profile(profilesFields).save().then(profile=>{
   
        res.json(profile);
    })
});

9.搭建下拉刷新接口

/**$登录接口
 * @route POST api/profiles/add
 * @desc 创造朋友圈信息接口
 * @access private
 */
router.get("/latest",passport.authenticate("jwt",{
   session:false}),(req,res)=>{
   
    Profile.find()
        .sort({
   date:-1})
        .then(profiles=>{
   
            if(!profiles) return res.status(400).json("没有更多数据");
            let newProfiles = [];
            for (let i=0;i<3;i++){
   
                if (profiles[i]!==null){
   
                    newProfiles.push(profiles[i]);
                }
            }
            res.json(newProfiles);
        })
});

10.搭建上拉刷新接口

router.get("/:page/:size",passport.authenticate("jwt",{
   session:false}),(req,res)=>{
   
    Profile.find()
        .sort({
   date:-1})
        .then(profiles=>{
   
            if(!profiles) return res.status(400).json("没有更多数据");
            let newProfiles = [];
            let page = req.params.page;
            let size = req.params.size;
            let index = size * (page-1);
            for (let i=index;i<size*page;i++){
   
                if (profiles[i]!==null){
   
                    newProfiles.push(profiles[i]);
                }
            }
            res.json(newProfiles);
        })
});

11.配置前后端连载

使用vue create client生成前端项目

11.1.安装concurrently模块

确保当前路径在node项目的package.json同目录下，执行

cnpm install concurrently

11.2.2.配置vue项目的package.json

"scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"`
  },

修改package.json文件如上，添加了 “start”: “npm run serve”

11.3.配置node项目的package.json

"scripts": {
   
    "client-install": "npm install --prefix client",
    "client": "npm start --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }

修改package.json文件如上，关键在于"dev": “concurrently “npm run server” “npm run client””。
[nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中]

11.4.切换至node项目

执行
npm run dev
此时即可同时启动后端与前端项目

若报错，可删除node_module文件夹重新执行cnpm install

12.前端准备工作

12.1.1设置主页路由

{
   
      path: '/',
      name: 'index',
      component: () => import("