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("./views/Index.vue"