day07-vue项目-搭建项目到登录功能
文章目錄
- 1.電商業(yè)務概述
- 2.項目初始化
- 3.碼云相關操作
- B.安裝git
- D.在本地創(chuàng)建公鑰：在終端運行：ssh-keygen -t rsa -C "xxx@xxx.com"
- 4.配置后臺項目
- A.安裝phpStudy并導入mysql數(shù)據庫數(shù)據
- B.安裝nodeJS，配置后臺項目,從終端打開后臺項目vue_api_server
- C.使用postman測試api接口
- 5.實現(xiàn)登錄功能
- 概述
- A.登錄狀態(tài)保持
- B.登錄邏輯
- C.添加新分支login，在login分支中開發(fā)當前項目vue_shop
- 進一步處理
- A.添加element-ui的表單組件
- B.添加第三方字體
- C.添加表單驗證的步驟
- 6.登錄成功之后的操作
- A.登錄成功之后，需要將后臺返回的token保存到sessionStorage中
- 補充
- 關于ESlint配置文件
1.初始化項目
2.基于Vue技術棧進行項目開發(fā)
3.使用Vue的第三方組件進行項目開發(fā)
4.理解前后端分離開發(fā)模式
1.電商業(yè)務概述
客戶使用的業(yè)務服務：PC端，小程序，移動web，移動app
管理員使用的業(yè)務服務：PC后臺管理端。
PC后臺管理端的功能：管理用戶賬號（登錄，退出，用戶管理，權限管理），商品管理（商品分類，分類參數(shù)，商品信息，訂單），數(shù)據統(tǒng)計
電商后臺管理系統(tǒng)采用前后端分離的開發(fā)模式
前端項目是基于Vue的SPA（單頁應用程序）項目
前端技術棧:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技術棧：Node.js,Express,Jwt(模擬session),Mysql,Sequelize(操作數(shù)據庫的框架)
2.項目初始化
A.安裝Vue腳手架
B.通過腳手架創(chuàng)建項目
C.配置路由
D.配置Element-UI:在插件中安裝，搜索vue-cli-plugin-element
E.配置Axios：在依賴中安裝,搜索axios(運行依賴)
F.初始化git倉庫
G.將本地項目托管到github或者碼云中
3.碼云相關操作
A.注冊登錄碼云賬號
B.安裝git
在Windows上使用Git，可以從Git官網直接下載安裝程序進行安裝。 測試命令：git --version#C.點擊網站右上角“登錄”，登錄碼云，并進行賬號設置
D.在本地創(chuàng)建公鑰：在終端運行：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.
當我們創(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文件，復制文件中的所有代碼，點擊碼云中的SSH公鑰，將生成的公鑰復制到公鑰中
G.測試公鑰：打開終端，輸入命令
ssh -T git@gitee.com
H.將本地代碼托管到碼云中
點擊碼云右上角的+號->新建倉庫
I.進行git配置：
打開項目所在位置的終端，進行git倉庫關聯(lián)
4.配置后臺項目
A.安裝phpStudy并導入mysql數(shù)據庫數(shù)據
B.安裝nodeJS，配置后臺項目,從終端打開后臺項目vue_api_server
然后在終端中輸入命令安裝項目依賴包：npm install
C.使用postman測試api接口
5.實現(xiàn)登錄功能
概述
A.登錄狀態(tài)保持
? 如果服務器和客戶端同源，建議可以使用cookie或者session來保持登錄狀態(tài)
? 如果客戶端和服務器跨域了，建議使用token進行維持登錄狀態(tài)。
B.登錄邏輯
? 在登錄頁面輸入賬號和密碼進行登錄，將數(shù)據發(fā)送給服務器
? 服務器返回登錄的結果，登錄成功則返回數(shù)據中帶有token
? 客戶端得到token并進行保存，后續(xù)的請求都需要將此token發(fā)送給服務器，服務器會驗證token以保證用戶身份。
C.添加新分支login，在login分支中開發(fā)當前項目vue_shop
? 打開vue_shop終端，使用git status確定當前項目狀態(tài)。
? 確定當前工作目錄是干凈的之后，創(chuàng)建一個分支進行開發(fā)，開發(fā)完畢之后將其合并到master
? git checkout -b login
? 然后查看新創(chuàng)建的分支：git branch
? 確定我們正在使用login分支進行開發(fā)
然后執(zhí)行vue ui命令打開ui界面，然后運行serve，運行app查看當前項目效果
發(fā)現(xiàn)現(xiàn)在是一個默認頁面，我們需要進行更改，打開項目的src目錄，點擊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(根組件)，將根組件的內容進行操作梳理(template中留下根節(jié)點，script中留下默認導出，去掉組件，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標簽,style標簽中的scoped可以防止組件之間的樣式沖突，沒有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中導入組件并設置規(guī)則
在App.vue中添加路由占位符
當我們給Login.vue中的內容添加樣式的時候，會報錯“缺少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中導入global.css，使得全局樣式生效 import “./assets/css/global.css”
然后Login.vue中的根元素也需要設置撐滿全屏（height:100%）
最終Login.vue文件中的代碼如下
其中我們有用到一下內容，需要進行進一步處理：
進一步處理
A.添加element-ui的表單組件
在plugins文件夾中打開element.js文件，進行elementui的按需導入
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.添加第三方字體
復制素材中的fonts文件夾到assets中,在入口文件main.js中導入import ‘./assets/fonts/iconfont.css’
然后直接在
接著添加登錄盒子
C.添加表單驗證的步驟
1).給添加屬性:rules=“rules”，rules是一堆驗證規(guī)則，定義在script、中
2).在script中添加rules：
…
3).通過的prop屬性設置驗證規(guī)則
vue.prototype和vue.use的區(qū)別和注意點
1、vue.prototype：實例上掛載屬性/方法，例如Vue.prototype.axios = axios;
2、vue.use：引入插件，例如vuex，vue.use(vuex)
4.導入axios以發(fā)送ajax請求
打開main.js，import axios from ‘axios’;
設置請求的根路徑：axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’;
掛載axios：Vue.prototype.$http = axios;
5.配置彈窗提示：
在plugins文件夾中打開element.js文件，進行elementui的按需導入
import {Message} from ‘element-ui’
進行全局掛載：
在login.vue組件中編寫彈窗代碼：
this.$message.error('登錄失敗')6.登錄成功之后的操作
A.登錄成功之后，需要將后臺返回的token保存到sessionStorage中
操作完畢之后，需要跳轉到/home
login() {//點擊登錄的時候先調用validate方法驗證表單內容是否有誤this.$refs.LoginFormRef.validate(async valid => {console.log(this.loginFormRules)//如果valid參數(shù)為true則驗證通過if (!valid) {return}//發(fā)送請求進行登錄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)// 導航至/homethis.$router.push('/home')})}添加一個組件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地址直接訪問，則強制跳轉到登錄頁面
打開router.js
實現(xiàn)退出功能
在Home組件中添加一個退出功能按鈕,給退出按鈕添加點擊事件，添加事件處理代碼如下：
export default {methods:{logout(){window.sessionStorage.clear();this.$router.push('/login');}} }補充
A.處理ESLint警告
打開腳手架面板，查看警告信息
默認情況下，ESLint和vscode格式化工具有沖突，需要添加配置文件解決沖突。
在項目根目錄添加 .prettierrc 文件
打開.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.合并按需導入的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) // 進行全局掛載： Vue.prototype.$message = Message關于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 = {//此項是用來告訴eslint找當前配置文件不能往父級查找root: true, //此項是用來指定eslint解析器的，解析器必須符合規(guī)則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析parser: 'babel-eslint',//此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置為module，指某塊導入方式parserOptions: {sourceType: 'module'},//此項指定環(huán)境的全局變量，下面的配置指定為瀏覽器環(huán)境env: {browser: true,},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style// 此項是用來配置標準的js風格，就是說寫代碼的時候要規(guī)范的寫，如果你使用vs-code我覺得應該可以避免出錯extends: 'standard',// required to lint *.vue files// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規(guī)范html的plugins: ['html'],// add your custom rules here// 下面這些rules是用來設置從插件來的規(guī)范代碼的規(guī)則，使用必須去掉前綴eslint-plugin-// 主要有如下的設置規(guī)則，可以設置字符串也可以設置數(shù)字，兩者效果一致// "off" -> 0 關閉規(guī)則// "warn" -> 1 開啟警告規(guī)則//"error" -> 2 開啟錯誤規(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.將代碼提交到碼云
新建一個項目終端,輸入命令‘git status’查看修改過的與新增的文件內容
將所有文件添加到暫存區(qū)：git add .
將所有代碼提交到本地倉庫：git commit -m “添加登錄功能以及/home的基本結構”
查看分支： git branch 發(fā)現(xiàn)所有代碼都被提交到了login分支
將login分支代碼合并到master主分支，先切換到master：git checkout master
在master分支進行代碼合并：git merge login
將本地的master推送到遠端的碼云：git push
? 推送本地的子分支到碼云，先切換到子分支：git checkout 分支名
? 然后推送到碼云：git push -u origin 遠端分支名
擴展：解決無法推送至遠程分支
完美解決：error: failed to push some refs to ‘https://github.com/xxxx.git’
總結
以上是生活随笔為你收集整理的day07-vue项目-搭建项目到登录功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 操作系统学习笔记-06-系统调用
- 下一篇： vue-day03-vue组件化开发