最近在储备egg,因为网上的资源太少了,自己也是纠结了好几天,解决了无数的错误,才排除万难完成了这个小demo。
安装就不再赘述了,下面直接介绍:该demo的功能是将页面输入的内容保存到数据库中
- 该demo使用的模板引擎为nunjucks,又因为要将文件保存到数据库中所以需要引入MySQL的插件,于是config/plugin.js文件内容如下
//config/plugin.js
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks'
};
exports.mysql = {
enable: true,
package: 'egg-mysql',
};
- config/config.default.js文件在原来的基础上更改如下
module.exports = appInfo => {
const config = {
view: {
defaultViewEngine: 'nunjucks',
mapping: {
'.tpl': 'nunjucks',
},
},
mysql: {
client: {
host: 'localhost',
port: '3306',
user: 'root',
password: '',
database: 'test',
},
app: true,
agent: false,
}
};
config.keys = appInfo.name + '_1489393729180_4559';
return config;
};
app文件夹中的文件,app/public文件夹中存放js或者css等静态文件
- app/router.js
module.exports = app => {
app.get('/', 'home.index');
app.get('/add/:data','home.add');
};
- app/controller/home.js文件
module.exports = app => {
class HomeController extends app.Controller {
* index() {
yield this.ctx.render('index.tpl');
}
* add() {
const data = this.ctx.params.data;
const result = yield this.service.mysql.add(data);
this.ctx.body = 'success';
}
}
return HomeController;
};
- app/view/index.tpl
<html>
<head>
<title>Egg Demo</title>
<link rel="stylesheet" href="/public/css/bootstrap.min.css">
</head>
<body class="container">
<input type="text"><br />
<button class="btn btn-success">上传到数据库</button>
<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/index.js"></script>
</body>
</html>
- app/public/js/index.js
$("button").click(function(){
var data= $("input").val();
if(data){
$.ajax({
type:'get',
url:'/add/'+data,
success:function(data){
if(data == 'success'){
alert('上传成功!');
}
}
});
}
});
- app/service/mysql.js
module.exports = app => {
return class User extends app.Service {
* add() {
const data = this.ctx.params.data;
const result = yield this.app.mysql.insert('demo',{'data':data});
if(result.serverStatus == 2){
return "success";
}else{
return "fail";
}
}
}
};
以上既是这个简单demo的全部代码,如果错误请指正