我的第一個(gè)前后端項(xiàng)目

這篇具有很好參考價(jià)值的文章主要介紹了我的第一個(gè)前后端項(xiàng)目。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

基礎(chǔ)概念

VUE

了解vue-vue腳手架vue-cli

項(xiàng)目結(jié)構(gòu)：

VUE語(yǔ)法

初識(shí)VUE

VUE指令

組件

語(yǔ)法

核心插件

axios

Vuex

Vue Router路由管理器

elementui

項(xiàng)目demo快速上手

基礎(chǔ)概念

前后端分離?：核心思想是前端頁(yè)面通過(guò) ajax 調(diào)用后端的 restuful api 進(jìn)行數(shù)據(jù)交互

單頁(yè)面應(yīng)用（single page web application，SPA）：就是只有一張頁(yè)面，并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的 Web 應(yīng)用程序

HTML：頁(yè)面，定義了網(wǎng)頁(yè)的內(nèi)容?HTML 教程 | 菜鳥(niǎo)教程

JS：?控制了網(wǎng)頁(yè)的行為的編程語(yǔ)言??JavaScript 教程 | 菜鳥(niǎo)教程

TS：可以簡(jiǎn)單理解為有類型的js，最近挺火?TypeScript 中文手冊(cè) - TypeScript 中文手冊(cè)

CSS：樣式，描述了網(wǎng)頁(yè)的布局?CSS 教程 | 菜鳥(niǎo)教程

ps：這么多？怎么學(xué)的完？簡(jiǎn)單看下知道基礎(chǔ)就行了，畢竟誰(shuí)會(huì)手寫(xiě)呢？大概2-3天的學(xué)習(xí)即可開(kāi)發(fā)項(xiàng)目

vue只有一個(gè)html，整個(gè)項(xiàng)目只有這一個(gè) html 文件，所以vue是一個(gè)單頁(yè)面應(yīng)用，當(dāng)我們打開(kāi)這個(gè)應(yīng)用，表面上可以有很多頁(yè)面，實(shí)際上它們都只不過(guò)在一個(gè) div

VUE

vue官網(wǎng)：Vue.js - 漸進(jìn)式 JavaScript 框架 | Vue.js

了解vue-vue腳手架vue-cli

Vue 腳手架是 Vue 官方提供的標(biāo)準(zhǔn)化開(kāi)發(fā)工具/平臺(tái)，有命令行 / 界面的兩種操作方式，ps:我還是習(xí)慣用idea

vue-cli 安裝：npm install -g @vue/cli ，需要提前安裝node

創(chuàng)建項(xiàng)目：vue create vuedemo ，可以上下滑動(dòng)選擇參數(shù)

啟動(dòng)項(xiàng)目：npm run serve

項(xiàng)目結(jié)構(gòu)：

腳手架結(jié)構(gòu)，?render函數(shù)，vue.config.js，package.json，vue.js和vue.runtime.xxx.js的區(qū)別，有興趣在了解下就可以

有個(gè)package.json 需要注意下，這個(gè)類型maven的pom.xml，你在項(xiàng)目里安裝插件會(huì)自動(dòng)在package.json引入，也可以在package.json里面引入插件，然后右鍵運(yùn)行run install

webpack 是以 webpack 為模板指生成項(xiàng)目，webpack是一個(gè)現(xiàn)代的JavaScript應(yīng)用的靜態(tài)模塊打包工具。在package.json引入相應(yīng)的webpack的包也可正常使用，vue3都在用vite？

VUE語(yǔ)法

初識(shí)VUE

VUE指令

指令的作用是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM

v-bind縮寫(xiě)為：，主要是動(dòng)態(tài)綁定屬性，我理解類似于我們?cè)赿ata()里面要定義一個(gè)imgUrl變量，然后這個(gè)圖片鏈接就可以用變量了，寫(xiě)死對(duì)代碼不友好

v-on縮寫(xiě)為@，用于監(jiān)聽(tīng) DOM 事件，比如說(shuō)點(diǎn)擊

v-once,只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)(h5、微信小程序均不支持,不知道是啥玩意)

v-html，內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯，微信小程序會(huì)被轉(zhuǎn)為?rich-text，其實(shí)也是賦值，但是這個(gè)變量的字符串會(huì)被當(dāng)做html插入

v-if，v-else,v-else-if ，就是if else，他指定了條件為true才渲染，否則不渲染，渲染多個(gè)元素，可以用的組合方式

v-show，和v-if區(qū)別？

還可以用v-bind + Class 與 Style的方式， Class 與 Style主要是一些樣式，比如顏色大小，然后把樣式封裝成類或者方法去調(diào)用，一次還可以調(diào)用多個(gè)（通過(guò)數(shù)組的形式），這倆有啥區(qū)別？

列表渲染用v-for,可以實(shí)現(xiàn)基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表,用法和java的循環(huán)差不多，并且可以拿到 value下表（h5從1開(kāi)始，其他平臺(tái)從0），name類似key，value值

組件

VUE用了很多組件，組件就是把js或者view封裝起來(lái)通用化，我把它理解為 java 的工具類或者 jar 包

比如導(dǎo)航欄通用封裝成一個(gè)組件（工具類），elementui封裝了很多樣式和方法（jar包）

然后你就可以在其他view腳本調(diào)用該組件，且是可以用 props 實(shí)現(xiàn)傳參

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>組件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    //定義student組件
    const student = Vue.extend({
        template: `
          <div>
          <h2>學(xué)生名稱：{{ name }}</h2>
          <h2>學(xué)生年齡：{{ age }}</h2>
          </div>
        `,
        data() {
            return {
                name: 'JOJO',
                age: 20
            }
        }
    })

    //定義school組件
    const school = Vue.extend({
        template: `
          <div>
          <h2>學(xué)校名稱：{{ name }}</h2>
          <h2>學(xué)校地址：{{ address }}</h2>
          <student></student>
          </div>
        `,
        components: {
            student
        },
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        }
    })

    //定義hello組件
    const hello = Vue.extend({
        template: `
          <h1>{{ msg }}</h1>
        `,
        data() {
            return {
                msg: "歡迎學(xué)習(xí)尚硅谷Vue教程！"
            }
        }
    })

    //定義app組件
    const app = Vue.extend({
        template: `
          <div>
          <hello></hello>
          <school></school>
          </div>
        `,
        components: {
            school,
            hello
        }
    })

    //創(chuàng)建vm
    new Vue({
        template: `
          <app></app>
        `,
        el: '#root',
        components: {
            app
        }
    })
</script>
</html>

語(yǔ)法

ref：用來(lái)給元素或子組件注冊(cè)引用信息（id的替代者），應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上獲取的是組件實(shí)例對(duì)象（vc）

<button @click="show" ref="btn1">點(diǎn)我輸出ref</button>
  console.log(this.$refs.btn1)

props聲明：就好像接口的參數(shù)，我在組件里定義好參數(shù)變量，使用時(shí)可以傳參方式修改變量

使用v-model時(shí)要切記：v-model綁定的值不能是props傳過(guò)來(lái)的值，因?yàn)閜rops是不可以修改的

props傳過(guò)來(lái)的若是對(duì)象類型的值，修改對(duì)象中的屬性時(shí)Vue不會(huì)報(bào)錯(cuò)，但不推薦這樣做

mixin混入：把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象，組件和混入對(duì)象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”，在發(fā)生沖突時(shí)以組件優(yōu)先

plugin插件：用于增強(qiáng)Vue，包含install方法的一個(gè)對(duì)象，install的第一個(gè)參數(shù)是Vue，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)，比如vuex就是插件，了解即可，后面很多插件都是封裝好的

scoped樣式：讓樣式在局部生效，防止沖突，一般不用再APP.vue里

<template>
  <div class="scopeddemo">
    <h2>學(xué)生姓名：{{ name }}</h2>
  </div>
</template>
<style scoped>
.scopeddemo {
  background-color: chartreuse;
}
</style>

WebStorage：我理解是js的緩存，或者說(shuō)通過(guò)函數(shù)操作java對(duì)象的那種感覺(jué)

存儲(chǔ)內(nèi)容大小一般支持5MB左右
瀏覽器端通過(guò)Window.sessionStorage和Window.localStorage屬性來(lái)實(shí)現(xiàn)本地存儲(chǔ)機(jī)制
SessionStorage窗口關(guān)閉消失，localStorage需手動(dòng)清除

<script>
    let person = {name:"JOJO",age:20}
    function saveDate(){
        localStorage.setItem('msg','localStorage')
        localStorage.setItem('person',JSON.stringify(person))
    }
    function readDate(){
        console.log(localStorage.getItem('msg'))
        const person = localStorage.getItem('person')
        console.log(JSON.parse(person))
    }
    function deleteDate(){
        localStorage.removeItem('msg')
        localStorage.removeItem('person')
    }
    function deleteAllDate(){
        localStorage.clear()
    }
</script>

自定義事件：待學(xué)習(xí)

全局事件總線：一種組件間通信的方式，適用于任意組件間通信

核心插件

axios

全局反向代理，有axios和vue-resource(不維護(hù)了)兩個(gè)庫(kù)，先安裝 npm install axios

主要是封裝了?XMLHttpRequests / ajax 的?HTTP 庫(kù),用來(lái)像后端發(fā)請(qǐng)求

--直接在main.js添加代理，或者復(fù)雜規(guī)范點(diǎn)就新建一個(gè)config.js統(tǒng)一配置
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8081/api'
Vue.prototype.$axios = axios
--可以有多個(gè)配置，之后可在其他組件中通過(guò) this.$axios 發(fā)送數(shù)據(jù)
--可以在</script>里面寫(xiě)按鈕觸發(fā)調(diào)用了
methods: {
  login () {
    this.$axios
      .post('/login', {
        username: this.loginForm.username,
        password: this.loginForm.password
      })
      .then(successResponse => {
        if (successResponse.data.code === 200) {
          this.$router.replace({path: '/'})
        }
      })
      .catch(failResponse => {
      })
  }
}

插槽slot：一種組件間通信的方式，主要作用是讓父組件可以向子組件指定位置插入html結(jié)構(gòu)

有默認(rèn)插槽、具名插槽、作用域插槽3種分類

Vuex

Vuex是什么

管理共享狀態(tài)，專門在 Vue 中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè) Vue 插件，對(duì) vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫(xiě)），也是一種組件間通信的方式，且適用于任意組件間通信，npm i vuex

什么時(shí)候使用Vuex

多個(gè)組件依賴于同一狀態(tài)
來(lái)自不同組件的行為需要變更同一狀態(tài)

Vuex的基本使用：

初始化數(shù)據(jù)state，配置actions、mutations，操作文件store.js
組件中讀取vuex中的數(shù)據(jù)：$store.state.sum
組件中修改vuex中的數(shù)據(jù)：$store.dispatch('action中的方法名',數(shù)據(jù))?或?$store.commit('mutations中的方法名',數(shù)據(jù))

--大致流程就這樣，有很多用法，初學(xué)現(xiàn)在了解即可
const personAbout = {
  namespaced: true,//開(kāi)啟命名空間
  state: {...},
  mutations: {...},
  actions: {...}
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

Vue Router路由管理器

路由 | Vue.js

什么東西？：簡(jiǎn)單理解就是來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的

安裝vue-router，命令：npm i vue-router，應(yīng)用插件：Vue.use(VueRouter)

什么是路由：就是一個(gè)kv的映射關(guān)系，k是路徑，v是function 或 componen

分類：

后端路由：對(duì)應(yīng)一個(gè)func，服務(wù)器接收到一個(gè)請(qǐng)求時(shí)，根據(jù)請(qǐng)求路徑找到匹配的函數(shù)來(lái)處理請(qǐng)求，返回響應(yīng)數(shù)據(jù)
前端路由：value 是 component，用于展示頁(yè)面內(nèi)容，當(dāng)瀏覽器的路徑改變時(shí)，對(duì)應(yīng)的組件就會(huì)顯示

每個(gè)vue文件你都要在router導(dǎo)入注冊(cè)才能訪問(wèn)，要不然項(xiàng)目找不到這個(gè)vue

//該文件專門用于創(chuàng)建整個(gè)應(yīng)用的路由器，最基本路由如下
import VueRouter from "vue-router";
import Home from '../components/Hello'
//創(chuàng)建并暴露一個(gè)路由器
export default new VueRouter({
    routes:[
        {
            path:'/',
            nsmr:'Hello',
            component:Hello
        }
    ]
})

elementui

引入elementui

-- 本地運(yùn)行需要先下載npm i element-ui -S
--在main.js中引入，可以完整引入和按需引入，demo項(xiàng)目完整引入即可，只是代碼體積的影響
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)

可以去element-ui官網(wǎng)找到合適的樣式，copy代碼，有時(shí)需要稍微改造自己需要的樣式

項(xiàng)目demo快速上手

git地址：GitHub - hht-china/vue3-ts-demo

在demo的過(guò)程中也記錄了一些知識(shí)點(diǎn)，整體學(xué)習(xí)周期大概在3天，這么短的時(shí)間可以寫(xiě)一個(gè)完成的項(xiàng)目嗎

大多時(shí)候都用的開(kāi)源項(xiàng)目模板，從頭搭建實(shí)在太費(fèi)功夫，github搜多vue3 admin 找到starts較多且喜歡的風(fēng)格即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-438195.html

到了這里，關(guān)于我的第一個(gè)前后端項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！