vue个人小项目总结-白红宇

简介

自己写了一个vue小项目总结总结(为了节省篇幅和大家阅读的时间直接进入正题认真脸！)

项目详情可以查看的我Github仓库

用户登录帐号密码都是11

后台管理登录也是11

(其实还有别的帐号密码,如果您有心情可以查看api自己用Postman注册,用户注册自己可以直接在页面上注册)

github描述文档写了使用了写技术栈和界面截图

功能总结

前端api调用

# apiimport axios from 'axios'import store from '@/store/store'export default () => {  return axios.create({    baseURL: `http://123.207.60.132:8081/`,    headers: {      Authorization: `Bearer ${store.state.token}`    }  })}import Api from '@/services/Api'export default {  userLogin(credentials) {    return Api().post('/userLogin', credentials)  }}# music apiimport axios from 'axios'export default () => {  return axios.create({    baseURL: `http://123.207.60.132:3000/`  })}import Api from '@/services/musicApi'export default {  getTopList() {    return Api().get('/top/list?idx=3')  }}复制代码

更多内容

前端vuex状态管理

import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({  strict: true,  plugins: [createPersistedState()],  state: {    token: null,    user: null,    isUserLoggedIn: false  },  mutations: {    setToken(state, token) {      state.token = token      state.isUserLoggedIn = !!(token)    },    setUser(state, user) {      state.user = user    }  },  actions: {    setToken({ commit }, token) {      commit('setToken', token)    },    setUser({ commit }, user) {      commit('setUser', user)    }  }})复制代码

更多内容

前端界面

# 组件使用
    # 组件引入 import VSlider from './Slider/Index'export default {    # 声明组件    components: {        VSlider    },    data() {        return {            sliderImg: [                {                src: 'item1'                },                {                src: 'item2'                },                {                src: 'item3'                },                {                src: 'item4'                }            ]        }    }}复制代码

前端页面基本都是按照这样的方式写的更多内容

后台界面

后台界面除了按照前端页面写的以外还用了后台界面的写法

其中侧边栏是根据 router.js 配置的路由并且根据权限动态生成的，这样就省去了写一遍路由还要手动再写一次侧边栏这种麻烦事，但也遇到了一个问题，路由可能会有多层嵌套，很多人反馈自己的侧边栏会有三级，甚至还有五级的。所以重构了一下侧边栏，使用了递归组件，这样不管你多少级，都能愉快的显示了。复制的hhhh

页面还用了icon

主页显示用了这个基本的使用挺简单的看看文档就ok了不用另外写文章了

更多内容

前端router

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const constantRouterMap = [  { path: '*', redirect: '/404', hidden: true }]export default new Router({  mode: 'history', // require service support  scrollBehavior: () => ({ y: 0 }),  routes: constantRouterMap})复制代码

更多内容

后端基本服务

const express = require('express')const app = express()const config = require('./config/config')const fs = require('fs')const path = require('path')require('./router/index.js')(app)app.use(express.static(path.resolve(__dirname, './dist')))app.get('*', function(req, res) {    const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8')    res.send(html)})app.listen(config.port, function () {  console.log(`server run ${config.port} port`)})复制代码

后台主要使用nodejs express mongodb提供服务

功能用户登录注册

功能管理员登录注册

用户的密码加密

更多内容

后端model

const mongoose = require('mongoose')const Schema = mongoose.Schemaconst bcrypt =require('bcryptjs')  // 密码加密let SALT_WORK_FACTOR = 10const config = require('../config/config')mongoose.connect(config.database)var UserSchema = new Schema({  userName: {    type: String,    unique: true,  // 不重复    require: true  // 不为空  }})// 在保存密码之前用bcrypt加密保证密码只有用户知道UserSchema.pre('save', function (next){  // 保存this指向  let _this = this  // 判断是否为最新  if(!_this.isModified('password')){      return next()  }  // 加密EMMM 产生一个salt  bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt){    if(err){      return next(err)    }    // 结合salt 生成 hash    bcrypt.hash(_this.password, salt, function (err, hash) {      if(err){        return next(err)      }      // 用hash覆盖明文密码      _this.password = hash      next()    })  })})// 通过bcrypt的compare方法，对再次传入的密码和数据库中保存的加密后的密码进行比较，如果匹配，则登录成功 isMatch 为布尔值// mongoose 模型扩展 在 methods 对象上扩展UserSchema.methods.comparePassword = function (candidatePassword, cb) {  bcrypt.compare(candidatePassword, this.password, function (err, isMatch) {    if (err) {      return cb(err);    }    cb(null, isMatch);  });};module.exports = mongoose.model('User', UserSchema)复制代码

使用mongoose Schema定义数据模型

通过bcrypt密码加密

扩展方法对密码加密

更多内容

后端controllers

const User = require('../model/User')const AdminUser = require('../model/AdminUser')const jwt = require('jsonwebtoken')const config = require('../config/config')// tokenfunction jwtSignUser(user) {  const ONE_WEEK = 60 * 60 * 24 * 7  return jwt.sign(user, config.authentication.jwtSecret, {    expiresIn: ONE_WEEK  })}module.exports = {  async userLogin(req, res) {    try {      await User.findOne({        userName: req.body.userName      }, function (err, user) {        .........      })    }  }}复制代码

登录成功返回

success: true,message: '登录成功',token: 'token值'复制代码

登录成功返回

success: false,message: '登录失败', (或其他信息详情看文件)token: ''复制代码

对用户的密码判断

user.comparePassword(req.body.pass, (err, isMatch) => {     ... }复制代码

更多内容

总结

通过上面的练习学习了更多新知识

更加理解前后端的交互

加强了技术掌握程度

还有很多不符合现在开发的规范

代码不够精简干练

基础知识掌握不牢固

设计审美水平需要提升

......

大概就是这么多吧, 项目还有很多部规范的地方以后会慢慢改正, 虽然是个人里练习的项目, 自己还是话了很多时间和心血

最后最后最后说一个厚脸皮的话小哥哥小姐姐如果觉得不错的话可以给小生点一个嘛谢谢哇QAQ~~

自己马上就要实习了有大佬看上带走的吗！QAQ