node在web中应用

mvc

model-view-controller 模型-识图-控制器

appjs

const Koa=require('koa')
const path = require('path')//路径
const router=require("./router")
const bodyParser=require('koa-bodyparser')
const nunjucks = require('koa-nunjucks-2')//模板
const staticFiles = require('koa-static')//静态文件
const app=new Koa()

app.use(staticFiles(path.resolve(__dirname, "./public")))//注明静态文件位置

app.use(nunjucks({
    ext: 'html',
    path: path.join(__dirname, 'views'),// 指定视图目录
    nunjucksConfig: {
      trimBlocks: true // 开启转义 防Xss
    }
}));//配置识图位置

app.use(bodyParser())
router(app)

app.listen(3000,()=>{
	console.log(`action!`)
})

controller/home.js

// 引入 service 文件
const HomeService = require('../service/home')
module.exports={
	index: async function (ctx, next) {
      await ctx.render("home/index", {title: "iKcamp欢迎您"})
	  //调用views下面的home/index.html文件，并传入title值
    },
    home: async(ctx, next) => {
      console.log(ctx.request.query)
      console.log(ctx.request.querystring)
      ctx.response.body = '<h1>HOME page</h1>'
    },
	login:async(ctx,next)=>{
		await ctx.render('home/login',{
		  btnName: '提交'
		})
	},
	register: async function (ctx, next){
      let params = ctx.request.body
      let name = params.name
      let password = params.password
      let res = await HomeService.register(name,password)
      if(res.status == "-1"){
        await ctx.render("home/login", res.data)
      }else{
        ctx.state.title = "个人中心"
        await ctx.render("home/success", res.data)
      }
    }
	
}

service/home.js

 //service层做校验和数据库获取数据对比等工作
 module.exports = {
    register: async function(name, pwd) {
      let data 
      if(name == 'ikcamp' && pwd == '123456'){
        data = {
          status: 0,
          data: {
            title: "个人中心",
            content: "欢迎进入个人中心"
          }
        }
      }else{
        data = {
          status: -1,
          data: {
            title: '登录失败',
            content: "请输入正确的账号信息"
          }
        }
      }
      return data
    }
  }

layout-home.html

<!--继承layout.html内容-->
{% extends "./layout.html" %} 

<!--静态文件展示-->
{% block head %}
<link rel="stylesheet" href="/home/main.css">
{% endblock %}

{% block body %}

  {% block homeBanner %}
  {% endblock %}

<div class="show_time">
    <div class="feature-con">
        <ul class="feature fn-clear">
            <li class="feature-item"><i class="ico"></i>
                <h4 class="tit">免费资源</h4>
                <p class="des">为天地立心</p>
            </li>
            <li class="feature-item"><i class="ico"></i>
                <h4 class="tit">体系知识</h4>
                <p class="des">为科技立命</p>
            </li>
            <li class="feature-item"><i class="ico"></i>
                <h4 class="tit">实战项目</h4>
                <p class="des">为大牛继绝学</p>
            </li>
            <li class="feature-item"><i class="ico"></i>
                <h4 class="tit">线下交流</h4>
                <p class="des">为教育开太平</p>
            </li>
        </ul>
    </div>
</div>
{% endblock %}