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完成的是一个封装好的功能。
网友评论