欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

node服务器和thinkjs，Vue入门

程序员文章站 2022-04-19 14:13:41
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对象...

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");
})

<!-- index.html页面获取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("/index.html首页")
    } 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;

node服务器和thinkjs，Vue入门

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_index.html

控制首页

//| |--- 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

上一篇： 不忘老用户！魅族公布老机型换新服务：换购18最高补贴3300

下一篇： redis系列（13）-- 高级话题之主从复制--读写分离--容灾处理

推荐阅读