初始化准备工作
-
初始化目录
nmp init -y
-
安装基本的第三方插件
express
npm install express --save
art-template
npm install art-template express-art-template --save
jquery
npm intsall jquery --save
bootstrap
npm install bootstap --save
body-parser
npm install body-parser --save
-
页面文件
新建
public
文件夹,将写好的页面资源文件放进去。 -
测试
/*模块*/ var express = require('express'); var app = express(); var path = require('path'); var template = require('express-art-template'); /*组件、配置*/ app.use('/public/', express.static(path.join(__dirname, './public')));//静态资源文件 /*服务器*/ app.listen(8080, () => { console.log('8080 okk'); });
Path模块相关知识
Path模块是Node中专门用来操作路径字符串的模块,可以避免手动操作字符串的一些错误,且跨平台。
一般的路径字符串如:/foo/bar/baz/asdf/quux.html,可以发现一些共性:
- 目录名
- 文件名
- 扩展名
- 是否为绝对路径
所以path最基本的就是获取这些共性信息。
path.dirname(pathStr)
path.dirname('/foo/bar/baz/asdf/quux.html');//--- /foo/bar/baz/asdf
path.basename(pathStr [,ext])
path.basename('/foo/bar/baz/asdf/quux.html'); //--- quux.html
path.basename('/foo/bar/baz/asdf/quux'); //--- quux
path.basename('/foo/bar/baz/asdf/quux.html', '.html'); //--- quux
path.basename('/foo/bar/baz/asdf/quux.html', '.htm'); //--- quux.html
path.extname(pathStr)
path.extname('/foo/bar/baz/asdf/quux.html'); //--- .html
path.extname('/foo/bar/baz/asdf/quux'); //---
path.extname('/foo/bar/baz/asdf/quux.'); //--- .
path.isAbsolute(pathStr)
path.isAbsolute('/foo/bar'); // true
path.isAbsolute('/baz/..'); // true
path.isAbsolute('qux/'); // false
path.isAbsolute('.'); // false
此外,path还提供了一些常用的功能,比如
-
将路径字符串转化为路径对象
path.parse(pathStr)
path.parse('/foo/bar/baz/asdf/quux.html'); /* { root: '/', dir: '/foo/bar/baz/asdf', base: 'quux.html', ext: '.html', name: 'quux' } */
-
将对象转化为路径
path.format(pathObj)
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..'); //--- /foo/bar/baz/asdf
-
路径拼接
path.join([...paths])
Node中的关于绝对路径的两个参数,__dirname
和__filename
。
-
__dirname
为当前文件模块的绝对路径(不带文件名)。 -
__fielname
为当前件模块带文件名的绝对路径。
由于相对路径会在文件移动后导致程序出现一些问题,所以我们在操作路径时尽量使用绝对路径代替相对路径。
art-template的使用
子模板
子摸版的应用场景是很多网页都有相同的头部和尾部,那么这部分重复的html代码我们可以单独写在一个html文件中,在需要的地方引入即可,这个html就是子文件。
在art-template
中子模板的语法就是用来实现这个模板文件的引入问题的。标准语法如下:
{{include './header.art'}}
{{include './header.art' data}}
具体可参考官方文档:https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E5%AD%90%E6%A8%A1%E6%9D%BF
摸版继承
模板继承顾名思义,很多网页的结构大致相同,那么我们就可以编写一个父模板html文件,让类似结构的文件继承之,并可编写继承的内容。art-template
中的模板继承语法实现了这种思路。
在父模板中:
{{block 'head'}} ... {{/block}}
可规定继承块。
在自模板中,先继承,再修改继承的模板内容
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}
更多内容请参考官方文档:https://aui.github.io/art-template/zh-cn/docs/syntax.html#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF
路由设计
暂时设计一个简单的请求访问的跳转:
/*模块*/
var express = require('express');
var router = express.Router();
/*路由设计*/
router.get('/',(req,res) => {
res.render('./index.html');
});
router.get('/login',(req,res) => {
res.render('./login.html');
});
router.post('/login',(req,res) => {
res.render('./login.html');
});
router.get('/register',(req,res) => {
res.render('./register.html');
});
router.post('/register',(req,res) => {
//读取表单数据
var data = req.body;
});
router.get('/logout',(req,res) => {
res.render('./register.html');
});
module.exports = router;
然后在app.js
中使用路由:
/*模块*/
var express = require('express');
var app = express();
var path = require('path');
var template = require('express-art-template');
var bodyParser = require('body-parser');
var router = require('./router.js');
/*组件、配置*/
app.use('/public/', express.static(path.join(__dirname, './public')));//静态资源文件
app.use('/node_modules/',express.static(path.join(__dirname,'./node_modules')));//静态资源文件
app.engine('html', template);//配置模板引擎(设置的目录文件下的html文件自动渲染)
app.use(bodyParser.urlencoded({ extended: false }));// parse application/x-www-form-urlencoded
app.use(bodyParser.json());// parse application/json
app.use(router);
/*服务器*/
app.listen(8080, () => {
console.log('8080 okk');
});
退出登录逻辑
完善路由设计中的退出登录逻辑。
注册功能
1.数据库
注册就需要保存用户信息,这里使用mongodb
数据库来保存用户信息。所以先安装mongoose
:
npm install mongoose --save
使用新的文件模板来设计用户表:比如user.js
var mongoose = require('mongoose');
//连接数据库
mongoose.connect('mongodb://localhost/test', {
useMongoClient: true
});
//设计用户表
var Schema = mongoose.Schema;
var userSchema = new Schema({
email: {
type: String,
required: true
},
nickname: {
type: String,
required: true
},
password: {
type: String,
required: true
},
create_time: {
type: Date,
default: Date.now
},
last_modify_time: {
type: Date,
default: Date,now
},
avatar: {
type: String,
default: '/public/img/avatar-default.png'
},
bio: {
type: String,
default: ''
},
gender: {
type: Number,
enum: [-1, 0, 1],
default: -1
},
brithday: {
type: Date
},
status: {
type: Number,
enum: [0, 1, 2],
default: 0
}
});
module.exports = mongoose.model('User', userSchema);