簡介
自己寫了一個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)
}
}
})複製程式碼- 更多內容地址
前端介面
# 元件使用<
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