vue我的小項目總結

簡介

本身寫了一個vue小項目總結總結(爲了節省篇幅和你們閱讀的時間直接進入正題 認真臉！)

---

項目詳情能夠查看的我Github倉庫地址

項目預覽地址

vue-lottie動畫教程

• 用戶登陸賬號密碼都是11
• 後臺管理登陸也是11
• (其實還有別的賬號密碼,若是您有心情能夠查看api本身用Postman註冊,用戶註冊本身能夠直接在頁面上註冊)

github描述文檔寫了使用了寫技術棧 和 界面截圖

功能總結

前端api調用

# api
import 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 api

import 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.Schema
const bcrypt =require('bcryptjs')  // 密碼加密
let SALT_WORK_FACTOR = 10
const 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')


// token
function 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