当前位置： 移动技术网 > IT编程>开发语言>JavaScript > node服务器和thinkjs，Vue入门

node服务器和thinkjs，Vue入门

2020年07月09日  | 移动技术网IT编程  | 我要评论

node搭建express静态web服务器

可以实现静态服务器功能页面，图片，样式，js文件等都能访问

let express = require('express');
let app = express();//实例化express模块
app.use(express.static('static'));//静态地址

app.get('/api/userlist', (req,res)=>{//自定义api接口
  // 请求的信息：req对象
    // 响应的操作和信息：res对象
    res.json({
        state:"ok",
        userList:[
            {username:"小明",sex:"男"},
            {username:"小日",sex:"男"},
            {username:"小白",sex:"女"},
        ]
    })
})

app.listen(2200, ()=>{
    console.log("服务器启动","http://127.0.0.1:2200");
})

<!-- 页面获取ajax-->
<script>
        fetch('/api/userlist').then((res)=>{
            return res.json()
        }).then((res)=>{
            console.log(res);
            res.userList.forEach((item, i)=>{
                let newDiv = document.createElement('div');
                newDiv.innerHTML = item.username+"的性别是"+item.sex;
                document.body.appendChild(newDiv)
            })
        })
</script>

简单服务器返回不同页面（req.url判断）

let http = require('http');
let server = http.createServer();
server.on('request', (req, res) => {
    if(req.url == "/") {//判断请求的页面
        res.end("/首页")
    } else if(req.url == "/login.html") {
        res.end("/login.html登录页面")
    } else {
        res.end("404 not found")
    }
});
server.listen("2222", () => {
    console.log("服务开启成功", "http://127.0.0.1:2222");
});

thinkjs简单使用

快速入门

轻量级的Node.js开发框架

1.安装thinkjs手脚架命令

npm install -g think-cli

2.执行 thinkjs new [project_name] 命令来创建项目

thinkjs new demo;
cd demo;
npm install; 
npm start;

服务启动成功的时候

3.thinkjs的目录

|--- development.js   //开发环境下的入口文件
|--- nginx.conf  //nginx 配置文件
|--- package.json
|--- pm2.json //pm2 配置文件
|--- production.js //生产环境下的入口文件
|--- README.md
|--- src
| |--- bootstrap  //启动自动执行目录 
| | |--- master.js //Master 进程下自动执行
| | |--- worker.js //Worker 进程下自动执行
| |--- config  //配置文件目录
| | |--- adapter.js  // adapter 配置文件 
| | |--- config.js  // 默认配置文件 
| | |--- config.production.js  //生产环境下的默认配置文件，和 config.js 合并 
| | |--- extend.js  //extend 配置文件 
| | |--- middleware.js //middleware 配置文件 
| | |--- router.js //自定义路由配置文件
| |--- controller  //控制器目录 **控制路由**
| | |--- base.js
| | |--- index.js
| |--- logic //logic 目录 先判断执行此目录
| | |--- index.js
| |--- model //模型目录
| | |--- index.js
|--- view  //模板目录 **存放html文件**
| |--- index_

控制首页

//| |--- controller  //控制器目录 **控制路由**
//| | |--- index.js文件
const Base = require('./base.js');
module.exports = class extends Base {
  indexAction() {
    return this.display('index1');//可以直接指定首页摸板view下面的index1.html
    // this.success("helloWorld")
  }
};

获取数据

//| |--- controller  //控制器目录
//| | |--- index.js文件
const Base = require('./base.js');
module.exports = class extends Base {
  indexAction() {
    console.log("controller")
    let data = {
      user: "zexin",
      type: 'man'
    }
    this.assign(data);
    return this.display();
    
    // this.success("helloWorld")
  }
};
//html, index1.html
<body>
    <h1>{{user}}</h1>
    <h1>{{type}}</h1>
</body>

thinkjs的操作数据库没做

复习了下Vue的列表渲染，事件，条件渲染，组件

	<title>起步</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 视图层 -->
    <div id="app">
        hello {{msg}}
        <button @click="toggle">修改</button>
    </div>
    
    <!-- 数据逻辑层 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "world"
            },
            methods: {
                toggle: function() {
                    this.msg = "Vue"
                }
            }
        })
    </script>
</body>

//事件
v-on 或者@事件名：@click
<button v-on:click>按钮<button>
<button @click>按钮<button>
//条件渲染 
v-if v-else-if v-else
<div v-if="a==1">显示1</div>
<div v-else-if="a==2">显示2</div>
<div v-else>显示</div>
//列表渲染v-for
<li v-for="(item, index) in arr"></li>
//组件
<!-- 视图层 -->
    <div id="app">
        <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count>
    </div>
Vue.component('button-count', {
            data: function () {
                return {
                    count: 0
                }
            },
            template:'<div>{{count}} <button @click="count++">+1</button></div>'
        })
        var app = new Vue ({
            el: "#app"
        })

本文地址：https://blog.csdn.net/weixin_37648452/article/details/107216909

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网