做美女圖片網(wǎng)站犯法嗎廣告聯(lián)盟大全
目錄
- 1 搭建服務(wù)器
- 2 靜態(tài)文件托管
- 3 引入bootstrap
- 4 引入jquery
- 5 編寫后端接口
- 5.1 添加列表查詢方法
- 5.2 添加路由
- 5.3 添加數(shù)據(jù)表格
- 總結(jié)
我們前兩篇介紹了如何利用express搭建服務(wù)器，如何實(shí)現(xiàn)靜態(tài)資源托管。那利用這兩篇的知識(shí)點(diǎn)，我們就可以實(shí)現(xiàn)一個(gè)小功能。通常我們的管理系統(tǒng)是由模塊組成的，而模塊是由功能點(diǎn)組成。功能點(diǎn)分為四個(gè)基礎(chǔ)的部分，包括增加、修改、刪除、查看。
其實(shí)開發(fā)后臺(tái)管理系統(tǒng)，就是利用這四個(gè)基本功能點(diǎn)來進(jìn)行各種組合，來實(shí)現(xiàn)我們的業(yè)務(wù)目標(biāo)，先看一下我們這一次的實(shí)戰(zhàn)案例的效果
我們有一個(gè)表格，表示用戶管理，可以進(jìn)行添加用戶，也可以進(jìn)行刪除。
1 搭建服務(wù)器
首先呢需要搭建一下服務(wù)器，先創(chuàng)建一個(gè)工程目錄，我們叫usermanager
創(chuàng)建好之后用我們的vscode打開這個(gè)目錄
先需要初始化一下項(xiàng)目，使用npm init命令進(jìn)行初始化
npm init
然后創(chuàng)建一個(gè)app.js作為我們服務(wù)器的啟動(dòng)文件
先安裝一下express的包，在命令行輸入npm i express
npm i express
然后在app.js里輸入啟動(dòng)服務(wù)器的命令，啟動(dòng)我們的服務(wù)器
const express = require('express')
const app = express()
app.listen(3000, () => {console.log('server is running on port 3000')
})
第一句命令是我們需要引入我們的express的包
第二句是創(chuàng)建express
第三句是啟動(dòng)服務(wù)，監(jiān)聽3000端口
代碼寫好之后，在命令行輸入nodemon app.js啟動(dòng)我們的服務(wù)器
nodemon app.js
使用這個(gè)插件去啟動(dòng)的好處是，如果我們修改了代碼，會(huì)自動(dòng)幫我們重啟，省了不少事情
使用之前需要進(jìn)行一下安裝
npm i nodemon -g
后邊-g表示全局安裝，你下次再創(chuàng)建新項(xiàng)目的時(shí)候就不需要再安裝這個(gè)包了
2 靜態(tài)文件托管
我們這個(gè)實(shí)戰(zhàn)案例是一個(gè)單體架構(gòu)，所謂的單體架構(gòu)是前端和后端代碼都是在一個(gè)目錄下，和目前前后端分離，部署兩個(gè)項(xiàng)目還是不同的。
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)public文件夾，表示我們的靜態(tài)文件的目錄
一般靜態(tài)文件是三種，分別是html、css、js，當(dāng)然有時(shí)候還會(huì)有一些圖片，我們使用images目錄，在public目錄下創(chuàng)建css、javascript、images這幾個(gè)文件夾
在public目錄下創(chuàng)建index.html
可以下載一些頭像，放到images文件夾下
在app.js中我們將pulbic目錄作為我們靜態(tài)托管的目錄，輸入如下代碼
app.use(express.static('public'))
這個(gè)時(shí)侯在瀏覽器使用http://localhost:3000訪問可以看到我們的Html頁面的內(nèi)容已經(jīng)顯示出來
3 引入bootstrap
表格和新增表單的樣式，我們使用bootstrap這個(gè)框架來實(shí)現(xiàn)，找到bootstarp的官方網(wǎng)址，下載最新版本
bootstrap最新版本
將下載好的包解壓縮
在public目錄下創(chuàng)建一個(gè)bootstrap文件夾，將css和js文件夾拷貝進(jìn)來
4 引入jquery
操作dom我們使用jquery庫，打開jquery的網(wǎng)址官方網(wǎng)站
注意這個(gè)庫的下載方法是在按鈕上點(diǎn)擊右鍵，另存為
將庫下載到我們的JavaScript目錄下
回到我們的index.html文件下，將bootstrap和jquery引入到頁面中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.css"><script src="./bootstrap/js/bootstrap.bundle.js"></script><script src="./javascript/jquery-3.7.1.min.js"></script>
</head>
<body>靜態(tài)網(wǎng)頁托管
</body>
</html>
5 編寫后端接口
在頁面上操作的時(shí)候，其實(shí)是需要訪問后端接口的，我們這里使用模塊來開發(fā)后端接口。在根目錄下創(chuàng)建一個(gè)model文件夾
下邊創(chuàng)建一個(gè)UserModel.js
先用對象的語法創(chuàng)建我們的類
class UserModel{constructor(){this.userList = [{id:1,name:'zhangsan',age:20,sex:'男',address:'北京',phone:'13800000000',email:'233888@qq.com',avatar:'images/1.png'},{id:2,name:'lisi',age:18,sex:'女',address:'上海',phone:'13900000000',email:'233888@qq.com',avatar:'images/2.png'},{id:3,name:'wangwu',age:21,sex:'男',address:'廣州',phone:'13700000000',email:'233888@qq.com',avatar:'images/3.png'}];}
}module.exports = UserModel;
我們先用class關(guān)鍵字創(chuàng)建了一個(gè)類，用構(gòu)造方法我們初始化了一組用戶的數(shù)據(jù)，最后用模塊的導(dǎo)出語法將類導(dǎo)出，這樣在其他模塊中可以進(jìn)行導(dǎo)入
5.1 添加列表查詢方法
在類中我們添加一個(gè)查詢?nèi)繑?shù)據(jù)的方法
getUsers(){return {code:200,msg:'獲取成功',data:this.userList};}
這個(gè)方法比較簡單直接返回我們的用戶列表就可以，這里我們按照json的格式構(gòu)造了返回的結(jié)果，code用200表示成功，data是我們具體的數(shù)據(jù)
5.2 添加路由
接口有了之后，需要?jiǎng)?chuàng)建路由來調(diào)用我們的接口，在app.js里我們創(chuàng)建一個(gè)獲取用戶的路由，路由地址為/user/list
app.get('/user/list', (req, res) => {const users = userModel.getUsers()res.send(users)
})
路由添加好之后，我們用PostMan測試一下我們的接口
可以看到我們的接口已經(jīng)正常返回?cái)?shù)據(jù)了
5.3 添加數(shù)據(jù)表格
在html頁面里，我們使用table組件來展示我們的列表的內(nèi)容，因?yàn)橐呀?jīng)引入了bootstrap，所以可以添加一些樣式讓頁面變得更好看一點(diǎn)
<div class="container"><h2>用戶管理</h2><table class="table"><thead><th>用戶名</th><th>年齡</th><th>性別</th><th>地址</th><th>手機(jī)</th><th>郵箱</th><th>操作</th></thead><tbody></tbody></table></div>
現(xiàn)在表格已經(jīng)顯示出了表頭
頁面加載的時(shí)候我們要訪問后端接口獲取數(shù)據(jù)，我們定義一個(gè)getUserList方法用來請求后端的數(shù)據(jù)
function getUserList(){$.ajax({url:BASE_URL+'/user/list',type:'get',dataType:'json',success:function(res){const userList = res.datalet htmlStr ='';htmlStr = userList.reduce((html,item)=>{return html+=`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.sex}</td><td>${item.address}</td><td>${item.phone}</td><td>${item.email}</td><td><image src="${item.avatar}" width="40" height="40"/></td><td><button>刪除</button></td></tr>`},"");$('tbody').html(htmlStr);}})}
這里通過jquery發(fā)送異步請求，來調(diào)用后端的接口獲取數(shù)據(jù)，返回的數(shù)據(jù)我們通過模板字符串來拼接我們的表格的行數(shù)據(jù)，最終將拼接好的字符串渲染到tbody里
然后在頁面加載的時(shí)候，調(diào)用我們的方法用來初始化表格數(shù)據(jù)
$(()=>{getUserList();})
這個(gè)時(shí)候再刷新頁面的時(shí)候數(shù)據(jù)就被加載出來了
刪除和添加的思路和列表查詢類似，也是遵循先寫后端接口，然后實(shí)現(xiàn)前端的調(diào)用
總結(jié)
本篇我們以一個(gè)實(shí)際的案例重新復(fù)習(xí)了一下我們前兩篇學(xué)習(xí)過的知識(shí)點(diǎn)，在自己做架構(gòu)的時(shí)候需要按照業(yè)務(wù)述求選用合適的前后端框架，其實(shí)使用bootstarp+jquery也是一種不錯(cuò)的選擇。