Step 1.构建数据库

数据库是一个项目的基石，定义一个统一的表以及表中的字节，可以减少数据存储、获取与修改过程中产生的混乱。

对于数据库的构建，可以结合express：

（备注：以下内容来自“无组”成员的总结）

>结合express使用orm创建表

//引入依赖文件

let express = require('express');

let orm = require('orm');

let app = express();

//express引入数据对象，此处创建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();

}}));

>结合express对表中内容进行“增删改查”

//数据添加

app.get('/',function (req,res) {

req.models.Per.create({

id:1,

name:"小王"

},function (err) {

console.log(err);

})});

/*

用浏览器访问根地址既可以在数据库中添加一条数据

*/

//数据查询

app.get('/',function (req,res) {

req.models.Per.find({id:1},function (err,ans) {

res.json(ans[0]);

})});

/*

用浏览器访问根地址返回的数据为

{"id":1,"name":"小王","age":null,"continent":null,"photo":null}

可以用axios接收数据进行处理

*/

//数据修改

app.get('/',function (req,res) {

req.models.Per.find({id:1},function (err,ans) {

ans[0].name = "小李";

ans[0].save();

res.json(ans[0]);

})});

/*

用浏览器访问根地址返回的数据为

{"id":1,"name":"小李","age":null,"continent":null,"photo":null}

即数据已经修改

*/

//数据删除

app.get('/',function (req,res) {

req.models.Per.find({id:1},function (err,ans) {

ans[0].remove();

})});

/*

用浏览器访问根地址

查看数据库，数据已经被删除

*/

Step 2.构建API

API是什么？应用程序接口 (ApplicationProgrammingInterface） 简称API，是一个封装好的函数，是一个联通前端和后端的通道。在构建API时我们需要明确需要输入的数据与返回的数据。

>一个API的实例

app.get('/somewhere',function(req,res)){

//dosomething...

res.send('Hello');

}

其中get可以更换为post、put或delete方法。简单来说，这四种方法的区别为，get是获取数据、post为修改数据、put为更新数据、delete删除数据。

Step 3.前端页面

前端页面除了要用HTML标签搭建页面框架外，也需要与后台（服务器）有一个交互，即向服务器发送请求并接收响应。

>使用axios请求服务器某一接口（同上，其中的get可以更换为post、put或delete方法）

axios.get('/', {

//此处为请求数据

})

.then(function (response) {

//此处得到响应数据，可对数据进行相应处理

console.log(response);

})

.catch(function (error) {

console.log(error);

});

> 使用JQuery方法绑定函数

描述：在选定的元素上绑定一个或多个事件处理函数。举例，.on方法

$('.login').on('click',function() {

alert("hello world!")

}

当然也可以使用JS绑定事件的方法，此处不再举例。

到此，一个项目就完成了。简单来说：

数据库（存储数据）——> 服务器（为后端JS，提供API）——> 浏览器（前端，通过JS渲染展示到浏览器里）

再简单点说：

服务器提供API，浏览器通过JS向服务器请求API，而API完成的是一个封装好的功能。