module.exports = function (app) {
//主页，现在也是首页
app.get('https://www.jb51.net/', function (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.send('添加新闻页面');
});
app.post('/addNews', function (req, res) {
res.send('处理添加新闻请求');
});
app.get('/delete', function (req, res) {
res.send('删除新闻请求');
});
app.get('/view', function (req, res) {
res.send('查看新闻请求');
});
};
于是我们需要新建几个模板组织我们的网页，这里我们先不分离头尾只要最简单的页面即可
新增add与view两个模板文件，暂时表现与index.ejs一致，并且修改导航相关
复制代码 代码如下:
module.exports = function (app) {
//主页，现在也是首页
app.get('https://www.jb51.net/', function (req, res) {
res.render('index', { title: 'Express' });
});
app.get('/add', function (req, res) {
res.render('add', { title: '添加新闻页面' });
});
app.post('/addNews', function (req, res) {
res.send('处理添加新闻请求');
});
app.get('/delete', function (req, res) {
res.send('删除新闻请求');
});
app.get('/view', function (req, res) {
res.render('view', { title: '查看新闻请求' });
});
};
至此项目结构结束
数据操作
整体结构出来后，我们就需要进行数据操作了：
① 增加数据（增加新闻）
② 展示数据（展示新闻）
③ 删除数据（删除新闻）
本来还涉及到类型操作的，但是做着做着给搞没了，暂时不管他吧，因为首次做容易迷糊
增加新闻
这里，我们就不使用表单提交了，我们用ajax......这里顺便引入zepto库，于是我们的页面成了这样
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>
<%= title %></title>
<link href='https://www.jb51.net/stylesheets/style.css' />
<script src="https://www.jb51.net/javascripts/zepto.js" type="text/javascript"></script>
</head>
<body>
<h1>
<%= title %></h1>
<div>
标题：<input type="text" />
</div>
<div>
内容：<textarea></textarea>
</div>
<div>
<input type="button" type="button" value="添加新闻" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#ok').click(function () {
var param = {};
param.title = $('#title').val();
param.content = $('#content').val();
$.post('/addNews', param, function () {
console.log('添加成功');
});
});
});
</script>
</body>
</html>