文章目錄

• • • 1.電商業(yè)務(wù)概述
    • 2.項(xiàng)目初始化
    • 3.碼云相關(guān)操作
    • • B.安裝git
      • D.在本地創(chuàng)建公鑰：在終端運(yùn)行：ssh-keygen -t rsa -C "xxx@xxx.com"
    • 4.配置后臺(tái)項(xiàng)目
    • • A.安裝phpStudy并導(dǎo)入mysql數(shù)據(jù)庫數(shù)據(jù)
      • B.安裝nodeJS，配置后臺(tái)項(xiàng)目,從終端打開后臺(tái)項(xiàng)目vue_api_server
      • C.使用postman測試api接口
    • 5.實(shí)現(xiàn)登錄功能
    • • 概述
      • • A.登錄狀態(tài)保持
        • B.登錄邏輯
        • C.添加新分支login，在login分支中開發(fā)當(dāng)前項(xiàng)目vue_shop
      • 進(jìn)一步處理
      • • A.添加element-ui的表單組件
        • B.添加第三方字體
        • C.添加表單驗(yàn)證的步驟
    • 6.登錄成功之后的操作
    • • A.登錄成功之后，需要將后臺(tái)返回的token保存到sessionStorage中
    • 補(bǔ)充
    • • 關(guān)于ESlint配置文件

1.初始化項(xiàng)目
2.基于Vue技術(shù)棧進(jìn)行項(xiàng)目開發(fā)
3.使用Vue的第三方組件進(jìn)行項(xiàng)目開發(fā)
4.理解前后端分離開發(fā)模式

1.電商業(yè)務(wù)概述

客戶使用的業(yè)務(wù)服務(wù)：PC端，小程序，移動(dòng)web，移動(dòng)app
管理員使用的業(yè)務(wù)服務(wù)：PC后臺(tái)管理端。

PC后臺(tái)管理端的功能：管理用戶賬號(hào)（登錄，退出，用戶管理，權(quán)限管理），商品管理（商品分類，分類參數(shù)，商品信息，訂單），數(shù)據(jù)統(tǒng)計(jì)

電商后臺(tái)管理系統(tǒng)采用前后端分離的開發(fā)模式
前端項(xiàng)目是基于Vue的SPA（單頁應(yīng)用程序）項(xiàng)目

前端技術(shù)棧:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技術(shù)棧：Node.js,Express,Jwt(模擬session),Mysql,Sequelize(操作數(shù)據(jù)庫的框架)

2.項(xiàng)目初始化

A.安裝Vue腳手架
B.通過腳手架創(chuàng)建項(xiàng)目
C.配置路由
D.配置Element-UI:在插件中安裝，搜索vue-cli-plugin-element
E.配置Axios：在依賴中安裝,搜索axios(運(yùn)行依賴)
F.初始化git倉庫
G.將本地項(xiàng)目托管到github或者碼云中

3.碼云相關(guān)操作

A.注冊登錄碼云賬號(hào)

B.安裝git

在Windows上使用Git，可以從Git官網(wǎng)直接下載安裝程序進(jìn)行安裝。 測試命令：git --version

#C.點(diǎn)擊網(wǎng)站右上角“登錄”，登錄碼云，并進(jìn)行賬號(hào)設(shè)置

D.在本地創(chuàng)建公鑰：在終端運(yùn)行：ssh-keygen -t rsa -C “xxx@xxx.com”

E.找到公鑰地址：
Your identification has been saved in /c/Users/My/.ssh/id_rsa.
Your public key has been saved in /c/Users/My/.ssh/id_rsa.pub.
當(dāng)我們創(chuàng)建公鑰完畢之后，請注意打印出來的信息“Your public key has been saved in”
/c/Users/My/.ssh/id_rsa.pub : c盤下面的Users下面的My下面的.ssh下面的id_rsa.pub就是我們創(chuàng)建好的公鑰了

E.打開id_rsa.pub文件，復(fù)制文件中的所有代碼，點(diǎn)擊碼云中的SSH公鑰，將生成的公鑰復(fù)制到公鑰中

G.測試公鑰：打開終端，輸入命令
ssh -T git@gitee.com

H.將本地代碼托管到碼云中
點(diǎn)擊碼云右上角的+號(hào)->新建倉庫

I.進(jìn)行g(shù)it配置：

打開項(xiàng)目所在位置的終端，進(jìn)行g(shù)it倉庫關(guān)聯(lián)

4.配置后臺(tái)項(xiàng)目

A.安裝phpStudy并導(dǎo)入mysql數(shù)據(jù)庫數(shù)據(jù)

B.安裝nodeJS，配置后臺(tái)項(xiàng)目,從終端打開后臺(tái)項(xiàng)目vue_api_server

然后在終端中輸入命令安裝項(xiàng)目依賴包：npm install

C.使用postman測試api接口

5.實(shí)現(xiàn)登錄功能

概述

A.登錄狀態(tài)保持

? 如果服務(wù)器和客戶端同源，建議可以使用cookie或者session來保持登錄狀態(tài)
? 如果客戶端和服務(wù)器跨域了，建議使用token進(jìn)行維持登錄狀態(tài)。

B.登錄邏輯

? 在登錄頁面輸入賬號(hào)和密碼進(jìn)行登錄，將數(shù)據(jù)發(fā)送給服務(wù)器
? 服務(wù)器返回登錄的結(jié)果，登錄成功則返回?cái)?shù)據(jù)中帶有token
? 客戶端得到token并進(jìn)行保存，后續(xù)的請求都需要將此token發(fā)送給服務(wù)器，服務(wù)器會(huì)驗(yàn)證token以保證用戶身份。

C.添加新分支login，在login分支中開發(fā)當(dāng)前項(xiàng)目vue_shop

? 打開vue_shop終端，使用git status確定當(dāng)前項(xiàng)目狀態(tài)。
? 確定當(dāng)前工作目錄是干凈的之后，創(chuàng)建一個(gè)分支進(jìn)行開發(fā)，開發(fā)完畢之后將其合并到master
? git checkout -b login
? 然后查看新創(chuàng)建的分支：git branch

? 確定我們正在使用login分支進(jìn)行開發(fā)

然后執(zhí)行vue ui命令打開ui界面，然后運(yùn)行serve，運(yùn)行app查看當(dāng)前項(xiàng)目效果

發(fā)現(xiàn)現(xiàn)在是一個(gè)默認(rèn)頁面，我們需要進(jìn)行更改，打開項(xiàng)目的src目錄，點(diǎn)擊main.js文件（入口文件）

import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js'Vue.config.productionTip = falsenew Vue({router,render: h => h(App) }).$mount('#app')

再打開App.vue(根組件)，將根組件的內(nèi)容進(jìn)行操作梳理(template中留下根節(jié)點(diǎn)，script中留下默認(rèn)導(dǎo)出，去掉組件，style中去掉所有樣式)

<template><div id="app"><router-view></router-view></div> </template><script> export default {name: 'app' } </script><style> </style>

再打開router.js(路由)，將routes數(shù)組中的路由規(guī)則清除，然后將views刪除，將components中的helloworld.vue刪除

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [] })

在components文件夾中新建Login.vue組件,添加template，script，style標(biāo)簽,style標(biāo)簽中的scoped可以防止組件之間的樣式?jīng)_突，沒有scoped則樣式是全局的

<template><div class="login_container"></div> </template><script> export default {} </script><style lang="less" scoped> .login_container {background-color: #2b5b6b;height: 100%; }</style>

在router.js中導(dǎo)入組件并設(shè)置規(guī)則
在App.vue中添加路由占位符

const router = new Router({routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: Login }] })

當(dāng)我們給Login.vue中的內(nèi)容添加樣式的時(shí)候，會(huì)報(bào)錯(cuò)“缺少less-loader”，需要配置less加載器（開發(fā)依賴），安裝less(開發(fā)依賴)

然后需要添加公共樣式，在assets文件夾下面添加css文件夾，創(chuàng)建global.css文件,添加全局樣式

/* 全局樣式表 */ html,body,#app{width: 100%;height: 100%;margin: 0;padding: 0; }

在main.js中導(dǎo)入global.css，使得全局樣式生效 import “./assets/css/global.css”
然后Login.vue中的根元素也需要設(shè)置撐滿全屏（height:100%）
最終Login.vue文件中的代碼如下

<template><div class="login_container"><!-- 登錄盒子 --><div class="login_box"><!-- 頭像 --><div class="avatar_box"><img src="../assets/logo.png" alt=""></div><!-- 登錄表單 --><el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 用戶名 --><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input></el-form-item> <!-- 密碼 --><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item> <!-- 按鈕 --><el-form-item class="btns"><el-button type="primary" @click="login">登錄</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item> </el-form></div></div> </template><script> export default {data() {return {//數(shù)據(jù)綁定loginForm: {username: 'admin',password: '123456'},//表單驗(yàn)證規(guī)則loginFormRules: {username: [{ required: true, message: '請輸入登錄名', trigger: 'blur' },{min: 3,max: 10,message: '登錄名長度在 3 到 10 個(gè)字符',trigger: 'blur'}],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{min: 6,max: 15,message: '密碼長度在 6 到 15 個(gè)字符',trigger: 'blur'}]}}},//添加行為，methods: {//添加表單重置方法resetLoginForm() {//this=>當(dāng)前組件對象，其中的屬性$refs包含了設(shè)置的表單ref// console.log(this)this.$refs.LoginFormRef.resetFields()},login() {//點(diǎn)擊登錄的時(shí)候先調(diào)用validate方法驗(yàn)證表單內(nèi)容是否有誤this.$refs.LoginFormRef.validate(async valid => {console.log(this.loginFormRules)//如果valid參數(shù)為true則驗(yàn)證通過if (!valid) {return}//發(fā)送請求進(jìn)行登錄const { data: res } = await this.$http.post('login', this.loginForm)// console.log(res);if (res.meta.status !== 200) {return this.$message.error('登錄失敗:' + res.meta.msg) //console.log("登錄失敗:"+res.meta.msg)}this.$message.success('登錄成功')console.log(res)//保存tokenwindow.sessionStorage.setItem('token', res.data.token)// 導(dǎo)航至/homethis.$router.push('/home')})}} } </script><style lang="less" scoped> .login_container {background-color: #2b5b6b;height: 100%; } .login_box {width: 450px;height: 300px;background: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}} } .login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box; } .btns {display: flex;justify-content: flex-end; } </style>

其中我們有用到一下內(nèi)容，需要進(jìn)行進(jìn)一步處理：

進(jìn)一步處理

A.添加element-ui的表單組件

在plugins文件夾中打開element.js文件，進(jìn)行elementui的按需導(dǎo)入

import Vue from 'vue' import { Button } from 'element-ui' import { Form, FormItem } from 'element-ui' import { Input } from 'element-ui'Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input)

B.添加第三方字體

復(fù)制素材中的fonts文件夾到assets中,在入口文件main.js中導(dǎo)入import ‘./assets/fonts/iconfont.css’
然后直接在
接著添加登錄盒子

C.添加表單驗(yàn)證的步驟

1).給添加屬性:rules=“rules”，rules是一堆驗(yàn)證規(guī)則，定義在script、中
2).在script中添加rules：

export default{ data(){return{......, rules: {name: [{ required: true, message: '請輸入活動(dòng)名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個(gè)字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動(dòng)區(qū)域', trigger: 'change' }] }

…
3).通過的prop屬性設(shè)置驗(yàn)證規(guī)則

vue.prototype和vue.use的區(qū)別和注意點(diǎn)

1、vue.prototype：實(shí)例上掛載屬性/方法，例如Vue.prototype.axios = axios;

2、vue.use：引入插件，例如vuex，vue.use(vuex)

4.導(dǎo)入axios以發(fā)送ajax請求
打開main.js，import axios from ‘a(chǎn)xios’;
設(shè)置請求的根路徑：axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’;
掛載axios：Vue.prototype.$http = axios;

5.配置彈窗提示：
在plugins文件夾中打開element.js文件，進(jìn)行elementui的按需導(dǎo)入
import {Message} from ‘element-ui’
進(jìn)行全局掛載：

Vue.prototype.$message = Message;

在login.vue組件中編寫彈窗代碼：

this.$message.error('登錄失敗')

6.登錄成功之后的操作

A.登錄成功之后，需要將后臺(tái)返回的token保存到sessionStorage中

操作完畢之后，需要跳轉(zhuǎn)到/home

login() {//點(diǎn)擊登錄的時(shí)候先調(diào)用validate方法驗(yàn)證表單內(nèi)容是否有誤this.$refs.LoginFormRef.validate(async valid => {console.log(this.loginFormRules)//如果valid參數(shù)為true則驗(yàn)證通過if (!valid) {return}//發(fā)送請求進(jìn)行登錄const { data: res } = await this.$http.post('login', this.loginForm)// console.log(res);if (res.meta.status !== 200) {return this.$message.error('登錄失敗:' + res.meta.msg) //console.log("登錄失敗:"+res.meta.msg)}this.$message.success('登錄成功')console.log(res)//保存tokenwindow.sessionStorage.setItem('token', res.data.token)// 導(dǎo)航至/homethis.$router.push('/home')})}

添加一個(gè)組件Home.vue，并為之添加規(guī)則

<template><div>this is home<el-button type="info" @click="logout"> 退出 </el-button></div> </template><script> export default {methods: {logout() {window.sessionStorage.clear()this.$router.push('/login')}} } </script><style lang='less' scoped> </style>

添加路由規(guī)則

const router = new Router({routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: Login },{ path: '/home', component: Home }] })

添加路由守衛(wèi)
如果用戶沒有登錄，不能訪問/home,如果用戶通過url地址直接訪問，則強(qiáng)制跳轉(zhuǎn)到登錄頁面
打開router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue'Vue.use(Router)const router = new Router({routes: [{ path:'/', redirect:'/login'},{ path:'/login' , component:Login },{ path:'/home' , component:Home}] })//掛載路由導(dǎo)航守衛(wèi),to表示將要訪問的路徑，from表示從哪里來，next是下一個(gè)要做的操作 router.beforeEach((to,from,next)=>{ if(to.path === '/login')return next();//獲取tokenconst tokenStr = window.sessionStorage.getItem('token');if(!tokenStr)return next('/login');next();})export default router

實(shí)現(xiàn)退出功能

在Home組件中添加一個(gè)退出功能按鈕,給退出按鈕添加點(diǎn)擊事件，添加事件處理代碼如下：

export default {methods:{logout(){window.sessionStorage.clear();this.$router.push('/login');}} }

補(bǔ)充

A.處理ESLint警告
打開腳手架面板，查看警告信息

默認(rèn)情況下，ESLint和vscode格式化工具有沖突，需要添加配置文件解決沖突。
在項(xiàng)目根目錄添加 .prettierrc 文件

{"semi":false,"singleQuote":true }

打開.eslintrc.js文件，禁用對 space-before-function-paren 的檢查:

rules: {'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','space-before-function-paren' : 0},

B.合并按需導(dǎo)入的element-ui

import Vue from 'vue' import { Button, Form, FormItem, Input, Message } from 'element-ui'Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) // 進(jìn)行全局掛載： Vue.prototype.$message = Message

關(guān)于ESlint配置文件

ESlint配置文件eslintrc.js詳解 https://www.cnblogs.com/taoshengyijiuai/p/8431413.htmlVue中ESlint配置文件eslintrc.js文件詳解 https://blog.csdn.net/weixin_38606332/article/details/80864381module.exports = {//此項(xiàng)是用來告訴eslint找當(dāng)前配置文件不能往父級(jí)查找root: true, //此項(xiàng)是用來指定eslint解析器的，解析器必須符合規(guī)則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析parser: 'babel-eslint',//此項(xiàng)是用來指定javaScript語言類型和風(fēng)格，sourceType用來指定js導(dǎo)入的方式，默認(rèn)是script，此處設(shè)置為module，指某塊導(dǎo)入方式parserOptions: {sourceType: 'module'},//此項(xiàng)指定環(huán)境的全局變量，下面的配置指定為瀏覽器環(huán)境env: {browser: true,},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style// 此項(xiàng)是用來配置標(biāo)準(zhǔn)的js風(fēng)格，就是說寫代碼的時(shí)候要規(guī)范的寫，如果你使用vs-code我覺得應(yīng)該可以避免出錯(cuò)extends: 'standard',// required to lint *.vue files// 此項(xiàng)是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個(gè)配置是用來規(guī)范html的plugins: ['html'],// add your custom rules here// 下面這些rules是用來設(shè)置從插件來的規(guī)范代碼的規(guī)則，使用必須去掉前綴eslint-plugin-// 主要有如下的設(shè)置規(guī)則，可以設(shè)置字符串也可以設(shè)置數(shù)字，兩者效果一致// "off" -> 0 關(guān)閉規(guī)則// "warn" -> 1 開啟警告規(guī)則//"error" -> 2 開啟錯(cuò)誤規(guī)則// 了解了上面這些，下面這些代碼相信也看的明白了'rules': {// allow paren-less arrow functions'arrow-parens': 0,// allow async-await'generator-star-spacing': 0,// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0} }

C.將代碼提交到碼云
新建一個(gè)項(xiàng)目終端,輸入命令‘git status’查看修改過的與新增的文件內(nèi)容
將所有文件添加到暫存區(qū)：git add .
將所有代碼提交到本地倉庫：git commit -m “添加登錄功能以及/home的基本結(jié)構(gòu)”
查看分支： git branch 發(fā)現(xiàn)所有代碼都被提交到了login分支
將login分支代碼合并到master主分支，先切換到master：git checkout master
在master分支進(jìn)行代碼合并：git merge login
將本地的master推送到遠(yuǎn)端的碼云：git push

? 推送本地的子分支到碼云，先切換到子分支：git checkout 分支名
? 然后推送到碼云：git push -u origin 遠(yuǎn)端分支名

擴(kuò)展：解決無法推送至遠(yuǎn)程分支

完美解決：error: failed to push some refs to ‘https://github.com/xxxx.git’

總結(jié)

以上是生活随笔為你收集整理的day07-vue项目-搭建项目到登录功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。