node服务器和thinkjs,Vue入门
程序员文章站
2022-07-07 20:11:04
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;
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
推荐阅读
-
node项目如何部署(简述vue和javascript的关系)
-
vue.js入门教程之绑定class和style样式
-
node vue 开发环境部署时,外部访问页面出现: Invalid Host header 服务器域名访问出现的问题
-
vue、react等单页面项目部署到服务器的方法及vue和react的区别
-
Vue的基础入门和实例
-
node.js和vue.js安装配置教程
-
node.js中express模块创建服务器和http模块客户端发请求
-
node和vue实现商城用户地址模块
-
node.js使用http模块创建服务器和客户端完整示例
-
用Node.js和Express搭建一个简单的服务器(一)