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