教你如何从零搭建一个Node.js 的 MVC 项目
1、准备工做
安装 koa、热更新用的 supervisor
PS：安装 Node.js 就不介绍了，最新版本就 okcss
npm init -y
cnpm i koa --save
cnpm i supervisor --save-dev
复制代码
创建入口文件 app.js
./app.jshtml
const Koa = require("koa");
const app = new Koa();
app.listen(3000,()=>{
console.log("server is running..")
});
复制代码
./package.jsonvue
···
"scripts": {
"start": "npm run dev",
"dev": "supervisor -i ./node_modules ./app.js"
},
···
复制代码
注意 supervisor -i ./node_modules ./app.js 这条命令！ 要是不把 ./node_modules 排除掉的话，supervisor 会吃光你的内存，风扇狂转！
2、创建 controller
创建如图所示目录结构
controller 么，先对路由下手就完了 ~node
因此，继续下和路由有关的包吧~
cnpm i koa-simple-router --save
复制代码
ok，咱们能够愉快的写 controller 的父类了
./controllers/indexControllers.jses6
class IndexControllers {
constructor() {
}
actionIndex(ctx, next) {
ctx.body = "koa2 is running~~";
}
}
module.exports = IndexControllers;
复制代码
继承父类的 controller
./controllers/index.jsnpm
const router = require("koa-simple-router");
const IndexController = require("./indexControllers");
const indexController = new IndexController();
module.exports = app => {
app.use(router(_ => {
_.get("/", indexController.actionIndex);
_.get('/index.html', indexController.actionIndex);
}))
};
复制代码
_.get("/", indexController.actionIndex);
_.get('/index.html', indexController.actionIndex);伪静态json
回到入口文件 app.js 注册路由
const Koa = require("koa");
const app = new Koa();
// 注册路由
require("./controllers/index")(app);
app.listen(3000,()=>{
console.log("server is running..")
});
复制代码
OK! 咱们如今应能够启动服务了，
npm start以后访问本地服务，就能够看到效果了，是否是还有点儿小激动？浏览器
3、创建配置文件优化项目
app.js 里面的
app.listen(3000,()=>{console.log("server is running..")});的3000扔到入口文件不三不四，咱们能够把它放到另外的位置缓存
项目根目录创建 config 相关文件，如图所示
./config/index.jsbash
const config={
port:3000
};
module.exports(config);
复制代码
./app.js
const Koa = require("koa");
const app = new Koa();
const config = require("./config");
// 注册路由
require("./controllers/index")(app);
app.listen(config.port, () => {
console.log("server is running..")
});
复制代码
既然要优化端口，不如把
生产环境的 80 端口和开发环境的 3000 端口分开吧
安装 cross-env
cnpm i cross-env --save-dev
复制代码
改造 package.json 和 config.js
./package.json
···
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development supervisor -i ./node_modules ./app.js"
},
···
复制代码
./config/index.js
const config = {};
if (process.env.NODE_ENV === "development") {
config.port = 3000;
} else if (process.env.NODE_ENV === "production") {
config.port = 80;
}
module.exports = config;
复制代码
4、实现 view 层
老规矩，先创建目录吧
那么问题来了，这些静态文件咱们得把它们加载进来呀
安装 koa-static
cnpm i koa-static --save
复制代码
继续改造 config.js
./config/index.js
const path = require("path");
const config = {
staticDir: path.join(__dirname, "..", "assets")
};
if (process.env.NODE_ENV === "development") {
config.port = 3000;
} else if (process.env.NODE_ENV === "production") {
config.port = 80;
}
module.exports = config;
复制代码
把静态文件加载进来
./app.js
const Koa = require("koa");
const app = new Koa();
const config = require("./config");
const serve = require("koa-static");
// 注册路由
require("./controllers/index")(app);
// 加载静态文件
app.use(serve(config.staticDir));
app.listen(config.port, () => {
console.log("server is running..")
});
复制代码
5、实现 Model 层
在这里，咱们的模板引擎用的是 koa-swig.js
安装模板引擎
cnpm i koa-swig --save
cnpm i co --save
复制代码
注：
co是历史遗留问题，用来把koa1编译成koa2
完善 view 层
./views/layouts/layout.html
这个将会是全部模板的“祖宗”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block head %}
{% endblock %}
{% block link %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
复制代码
./views/index.html
继承了 layout.html
{% extends './layout.html' %}
{% block title %} 图书管理首页 {% endblock %}
{% block link %}
<link rel="stylesheet" href="/styles/index.css">
{% endblock %}
{% block content %}
<div>
<h1>{{content}}</h1>
</div>
{% endblock %}
{% block script %}
<script src="/scripts/index.js"></script>
{% endblock %}
复制代码
./assets/styles/index.css
css
body{
background: #000;
}
h1{
color:greenyellow;
}
p{
color:yellow;
}
复制代码
./assets/scripts/index.js
js
const content = "你好koa~~";
console.log(content);
复制代码
完善 controller 层
./controllers/index.js
class IndexControllers {
constructor() {
}
async actionIndex(ctx, next) {
ctx.body = await ctx.render('index.html',{
content:"hello node!"
});
}
}
module.exports = IndexControllers;
复制代码
在入口文件注册模板引擎
./config/index.js
const path = require("path");
const config = {
viewDir: path.join(__dirname, "..", "views"), // 把视图层加载引来
staticDir: path.join(__dirname, "..", "assets")
};
if (process.env.NODE_ENV === "development") {
config.port = 3000;
} else if (process.env.NODE_ENV === "production") {
config.port = 80;
}
module.exports = config;
复制代码
./app.js
const Koa = require("koa");
const app = new Koa();
const config = require("./config");
const serve = require("koa-static");
const render = require("koa-swig");
const co = require("co");
// 注册路由
require("./controllers/index")(app);
// 加载静态文件
app.use(serve(config.staticDir));
// 配置模板引擎
app.context.render = co.wrap(render({
root: config.viewDir, // 把视图层加载引来
autoescape: true,
cache: false, // 缓存
ext: 'html',
writeBody: false
}));
app.listen(config.port, () => {
console.log("server is running..")
});
复制代码
OK，咱们如今再看下
若是你作到这步了，那么胜利的曙光就要降了！
6、安装 babel
有人会问，如今的代码有什么问题吗？，有，并且很多。
你们回到 ./assets/scripts/index.js文件，若是我新增了一行以下代码，那会怎样呢？
const content = "你好koa~~";
console.log(content);
export default content;
复制代码
很正常么，由于它不认识啊，另外若是浏览器不支持
es6语法怎么办？
安装 babel
cnpm i babel @babel-cli --save-dev
cnpm i babel @babel-core --save-dev
cnpm i babel @babel-preset-env --save-dev
复制代码
项目根目录新建 .babelrc 文件
./.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": "systemjs"
}
]
]
}
复制代码
完善 package.json
···
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development supervisor -i ./node_modules ./app.js",
"build": "babel ./assets/scripts/index.js -o ./assets/scripts/index-bundle.js"
},
···
复制代码
npm run build 一下
完善 views/index.html
{% extends './layouts/layout.html' %}
{% block title %} 图书管理首页 {% endblock %}
{% block link %}
<link rel="stylesheet" href="/styles/index.css">
{% endblock %}
{% block content %}
<div>
<h1>{{content}}</h1>
</div>
{% endblock %}
{% block script %}
<script type="module">
import ("/scripts/index.js").then((_) => {
console.log(_.default);
})
</script>
<script type="nomodule" src="https://cdn.bootcss.com/systemjs/6.2.5/system.min.js"></script>
<script type="nomodule">
System.import("/scripts/index-bundle.js").then((_) => {
console.log(_.default);
})
</script>
{% endblock %}
复制代码
在这里咱们引入了万能木块加载器
systemjs
OK，如今咱们的第一阶段学习完成了~
7、CSR + SSR
好比咱们能够把
vue当jQuery用
./views/layouts/layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block head %}
{% endblock %}
{% block link %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
{% block script %}
{% endblock %}
</body>
</html>
复制代码
./assets/scripts/index.js
const content = "你好koa~~";
console.log(content);
const app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
export default content;
复制代码
./views/index.html
{% extends './layouts/layout.html' %}
{% block title %} 图书管理首页 {% endblock %}
{% block link %}
<link rel="stylesheet" href="/styles/index.css">
{% endblock %}
{% block content %}
<div>
<h1>[[content]]</h1> // 注意！
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
{% endblock %}
{% block script %}
<script type="module">
import ("/scripts/index.js").then((_) => {
console.log(_.default);
})
</script>
<script type="nomodule" src="https://cdn.bootcss.com/systemjs/6.2.5/system.min.js"></script>
<script type="nomodule">
System.import("/scripts/index-bundle.js").then((_) => {
console.log(_.default);
})
</script>
{% endblock %}
复制代码
注意！vue 和 swig 的模板引擎的标识符不能冲突
因此咱们还要改下配置文件
./app.js
const Koa = require("koa");
const serve = require("koa-static");
const render = require("koa-swig");
const config = require("./config");
const co = require("co");
const app = new Koa();
app.use(serve(config.staticDir));
app.context.render = co.wrap(render({
varControls:["[[","]]"],// 自定义模板语法
root: config.viewDir,
autoescape: true,
cache: false, // 缓存
ext: 'html',
writeBody: false
}));
require("./controllers")(app);
app.listen(config.port, () => {
console.log("图书管理平台启动成功...");
});
复制代码
大功告成！
相关文章
- 1. 如何从零开始搭建一个React项目
- 2. 如何从零开始搭建一个vue-webpack项目
- 3. 从零开始搭建MVC项目
- 4. 从零搭建一个vue项目
- 5. 从零搭建一个springboot项目
- 6. 教你如何搭建vue项目
- 7. NVisionXR_iOS教程一 —— 从零搭建一个AR项目
- 8. 手把手教你如何快速搭建一个Vue项目
- 9. 如何搭建一个vue的项目
- 10. 你还在从零搭建项目 ？
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • Eclipse 创建 Java 项目 - Eclipse 教程
- • 适用于PHP初学者的学习线路和建议
- • Github 简明教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi来袭
- 2. 机器学习-补充03 神经网络之**函数(Activation Function)
- 3. git上开源maven项目部署 多module maven项目（多module maven+redis+tomcat+mysql）后台部署流程学习记录
- 4. ecliple-tomcat部署maven项目方式之一
- 5. eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息
- 6. Spark RDD的依赖于DAG的工作原理
- 7. VMware安装CentOS-8教程详解
- 8. YDOOK：Java 项目 Spring 项目导入基本四大 jar 包 导入依赖，怎样在 IDEA 的项目结构中导入 jar 包 导入依赖
- 9. 简单方法使得putty（windows10上）可以免密登录树莓派
- 10. idea怎么用本地maven
欢迎关注本站公众号,获取更多信息
相关文章