vue個人小專案總結

_小田發表於2018-06-22
Vue

簡介

自己寫了一個vue小專案總結總結(為了節省篇幅和大家閱讀的時間直接進入正題 認真臉！)

專案詳情可以檢視的我Github倉庫地址

專案預覽地址

vue-lottie動畫教程

  • 使用者登入帳號密碼都是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)    
  }  
  }
  })複製程式碼

前端介面

# 元件使用<
v-slider :sliderImg="sliderImg">
<
/v-slider>
# 元件引入 import VSlider from './Slider/Index'export default { 
   # 宣告元件    components: { 
       VSlider    
  },    data() { 
       return { 
           sliderImg: [                { 
               src: 'item1'                
  },                { 
               src: 'item2'                
  },                { 
               src: 'item3'                
  },                { 
               src: 'item4'                
  }            ]        
  }    
  }
  }複製程式碼
  • 前端頁面基本都是按照這樣的方式寫的 更多內容地址

後臺介面

  • 後臺介面除了按照前端頁面寫的以外還用了vue-element-admin後臺介面的寫法

  • 其中側邊欄是根據 router.js 配置的路由並且根據許可權動態生成的，這樣就省去了寫一遍路由還要手動再寫一次側邊欄這種麻煩事，但也遇到了一個問題，路由可能會有多層巢狀，很多人反饋自己的側邊欄會有三級，甚至還有五級的。所以重構了一下側邊欄，使用了遞迴元件，這樣不管你多少級，都能愉快的顯示了。文章地址 複製的hhhh

  • 頁面還用了icon文章地址

  • 主頁顯示用了v-charts圖表元件 這個基本的使用挺簡單的看看文件就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) =>
 { 
    ... 
  }複製程式碼

總結

  • 通過上面的練習學習了更多新知識

  • 更加理解前後端的互動

  • 加強了技術掌握程度

  • 還有很多不符合現在開發的規範

  • 程式碼不夠精簡幹練

  • 基礎知識掌握不牢固

  • 設計審美水平需要提升

  • ……

大概就是這麼多吧, 專案還有很多部規範的地方以後會慢慢改正, 雖然是個人裡練習的專案, 自己還是話了很多時間和心血

最後 最後 最後 說一個厚臉皮的話 小哥哥小姐姐如果覺得不錯的話可以給小生點一個 Star 嘛 謝謝哇QAQ~~

自己馬上就要實習了 有大佬看上帶走的嗎！QAQ

來源：https://juejin.im/post/5b2c92c651882574d87a9429

相關文章