資料庫前端搭建學習筆記2020-12-16至

琦哥不會用電腦發表於2020-12-17

資料庫前端筆記

資料庫前端學習筆記

前言

小組的課題是外賣系統，組長在b站找到了很詳細的教學視訊，還有原始碼，嗚嗚被帶飛了，我就像個憨憨，全程被帶著走，感謝神仙組員們qaq.
視訊連結：https://www.bilibili.com/video/BV1EE411B7SU?p=1

環境配置

vue-cli

視覺化介面，腳手架？我也不知道為啥這麼叫，不太懂，只會用那個很牛的gui介面。一定要vue-cli版本在3.0.0以上才可以使用。
2.9.6版本的可以先解除安裝，再安裝新的，詳情可參照csdn中相關教程。

element-ui（外掛）

官網給出了許多程式碼段可以直接使用，上圖為container佈局容器提供的常用佈局模板和程式碼。

axios庫（執行依賴

還沒學，，，好像是連結資料庫用的。。

less-loader和less(開發依賴

安裝了這兩個依賴才能使用less語法，即後面後出現的控制樣式只應用在當前元件的語法。

vs2019

編譯環境，安裝了網站編寫的外掛，才會自動補全程式碼，但是安裝外掛很方便，也不算是什麼大問題。
記得把改為UTF8編碼，不然輸中文會亂碼。。。

程式碼部分

頁面間的跳轉

新建一個元件（頁面

components資料夾中新建專案“xxx.vue”

//部分一//
<template>
	<div>
	</div>
</template>

//部分二//
<script>
export default {}
</script>

//部分三//
<style lang="less" scoped> //lang="less"scoped 指該樣式只應用於此元件若不加，則應用與全域性，會使各元件樣式產生衝突，最好都加

</style>

通過路由的形式，將該元件渲染到根元件（如app.vue)
找到router （可能是和main.js在同一目錄的router.js檔案，也可能是在router資料夾中的index.js檔案）

import xxx from 'where...'
//xxx元件名，我感覺相當於一個連結的名字，where處填寫填寫要連結的檔案的路徑

然後在routes中新增一個路由規則

const routes = [
  {path:'/',redirect:'/login'},
  {path:'/login',component:LoginChar}]
  //意思是在使用者點選'/login'這個地址的時候跳轉到LoginChar這個元件

最後一步，在根元件（app.vue)，或者當前元件中的template部分新增路由佔位符，這樣所有通過路由跳轉的元件就會被渲染到根元件中或者當前元件中。（只有加了路由佔位符，才能實現跳轉功能）。

<template>
  <div id="app">
    <router-view></router-view>//路由佔位符
  </div>
</template>

頁面佈局

element-ui上提供了很多常用佈局的程式碼，可直接使用。

頁面樣式

全域性樣式表“公有”樣式

在assets資料夾中建立子資料夾css，再在css資料夾中建立global.css檔案
在global.css設定全域性樣式
在入口檔案（main.js）中匯入全域性樣式表

我理解這個的意思就是，我在全域性樣式表中將html和body的高度設為了100%，則所有元件中html和body的高度都為100%，這個時候我只要在不同元件中設定不同的顏色，就可以得到不同顏色的全屏。