Step 1.構(gòu)建數(shù)據(jù)庫(kù)
數(shù)據(jù)庫(kù)是一個(gè)項(xiàng)目的基石爹谭，定義一個(gè)統(tǒng)一的表以及表中的字節(jié)介时，可以減少數(shù)據(jù)存儲(chǔ)报咳、獲取與修改過程中產(chǎn)生的混亂椎咧。
對(duì)于數(shù)據(jù)庫(kù)的構(gòu)建玖详，可以結(jié)合express：
（備注：以下內(nèi)容來自“無組”成員的總結(jié)）
>結(jié)合express使用orm創(chuàng)建表
//引入依賴文件
let express = require('express');
let orm = require('orm');
let app = express();
//express引入數(shù)據(jù)對(duì)象，此處創(chuàng)建person表
app.use(orm.express("sqlite:testDB.db", {define: function (db, models, next) {
models.Per = db.define("person", {id: {type: 'number'},name: {type: 'text'},
age: {type: 'text'},
continent: {type: 'text'},
photo: {type: 'text'}
});
//此處可添入其他表
next();
}}));
>結(jié)合express對(duì)表中內(nèi)容進(jìn)行“增刪改查”
//數(shù)據(jù)添加
app.get('/',function (req,res) {
req.models.Per.create({
id:1,
name:"小王"
},function (err) {
console.log(err);
})});
/*
用瀏覽器訪問根地址既可以在數(shù)據(jù)庫(kù)中添加一條數(shù)據(jù)
*/
//數(shù)據(jù)查詢
app.get('/',function (req,res) {
req.models.Per.find({id:1},function (err,ans) {
res.json(ans[0]);
})});
/*
用瀏覽器訪問根地址返回的數(shù)據(jù)為
{"id":1,"name":"小王","age":null,"continent":null,"photo":null}
可以用axios接收數(shù)據(jù)進(jìn)行處理
*/
//數(shù)據(jù)修改
app.get('/',function (req,res) {
req.models.Per.find({id:1},function (err,ans) {
ans[0].name = "小李";
ans[0].save();
res.json(ans[0]);
})});
/*
用瀏覽器訪問根地址返回的數(shù)據(jù)為
{"id":1,"name":"小李","age":null,"continent":null,"photo":null}
即數(shù)據(jù)已經(jīng)修改
*/
//數(shù)據(jù)刪除
app.get('/',function (req,res) {
req.models.Per.find({id:1},function (err,ans) {
ans[0].remove();
})});
/*
用瀏覽器訪問根地址
查看數(shù)據(jù)庫(kù)勤讽，數(shù)據(jù)已經(jīng)被刪除
*/
Step 2.構(gòu)建API
API是什么蟋座？應(yīng)用程序接口 (ApplicationProgrammingInterface） 簡(jiǎn)稱API，是一個(gè)封裝好的函數(shù)脚牍，是一個(gè)聯(lián)通前端和后端的通道向臀。在構(gòu)建API時(shí)我們需要明確需要輸入的數(shù)據(jù)與返回的數(shù)據(jù)。
>一個(gè)API的實(shí)例
app.get('/somewhere',function(req,res)){
//dosomething...
res.send('Hello');
}
其中g(shù)et可以更換為post诸狭、put或delete方法券膀。簡(jiǎn)單來說君纫，這四種方法的區(qū)別為，get是獲取數(shù)據(jù)芹彬、post為修改數(shù)據(jù)蓄髓、put為更新數(shù)據(jù)、delete刪除數(shù)據(jù)舒帮。
Step 3.前端頁面
前端頁面除了要用HTML標(biāo)簽搭建頁面框架外会喝，也需要與后臺(tái)（服務(wù)器）有一個(gè)交互，即向服務(wù)器發(fā)送請(qǐng)求并接收響應(yīng)玩郊。
>使用axios請(qǐng)求服務(wù)器某一接口（同上肢执，其中的get可以更換為post、put或delete方法）
axios.get('/', {
//此處為請(qǐng)求數(shù)據(jù)
})
.then(function (response) {
//此處得到響應(yīng)數(shù)據(jù)译红，可對(duì)數(shù)據(jù)進(jìn)行相應(yīng)處理
console.log(response);
})
.catch(function (error) {
console.log(error);
});
> 使用JQuery方法綁定函數(shù)
描述：在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)。舉例临庇，.on方法
$('.login').on('click',function() {
alert("hello world!")
}
當(dāng)然也可以使用JS綁定事件的方法昵慌，此處不再舉例。
到此斋攀，一個(gè)項(xiàng)目就完成了已卷。簡(jiǎn)單來說：
數(shù)據(jù)庫(kù)（存儲(chǔ)數(shù)據(jù)）——> 服務(wù)器（為后端JS，提供API）——> 瀏覽器（前端淳蔼，通過JS渲染展示到瀏覽器里）
再簡(jiǎn)單點(diǎn)說：
服務(wù)器提供API，瀏覽器通過JS向服務(wù)器請(qǐng)求API讳癌，而API完成的是一個(gè)封裝好的功能。
