八.创建服务器的总结

八总结

1.静态服务器

 dos命令行
 ​
 http-server
 ​
 //  返回：ip和端口
 http://10.0.220.234:8080
 http://127.0.0.1:8080
 --------------
 当前目标文件夹
 httpStatic-index.html
 ---------------
 访问路径
 http://127.0.0.1:8080/httpStatic-index.html

 

2.node服务器

 http模块的createServer方法在本地创建一个服务器
 createServer方法用来创建服务器对象，然后服务器对象通过listen方法定义服务器的端口。
 注意：
 createServer（（res,req）=>{}）（回调函数）
 res.end（）（"渲染页面的内容，这是一个方法，有括号"）
 listen(3000,()=>{})（端口，回调函数）
 //因引入http模块 创建服务器对象  设置监听窗口
 const http=require('http')
 ​
 const server=http.createServer((req,res)=>{
     res.end(`<h1>hello node!</h1>`)
 });
 ​
 server.listen(3000 ,()=>{
     console.log("server is running!")
 });
 ----------------
 启动服务器：node main.js
 -------------------
 访问：http：//127.0.0.1:3000

 

3.koa框架

 npm init
 cnpm install --save koa 
 const koa =require('koa')
 const app =new koa()
 app.use(async(ctx)=>{
     ctx.body=`<h1>hello koa!</h1>
     <p> 你好 koa！</p>`
 })
 ​
 app.listen(3000,()=>{
     console.log('server is running')
 })
 --------------------
 node server.js
 --------------------
 http://127.0.0.1:3000/

 

4.koa框架-路由

实现一个有多个页面的应用程序了

 npm init
 cnpm install --save koa
 cnpm install --save koa-router
 const koa=require('koa')
 const app=new koa()
 const router=require('koa-router')()   //记得加括号是函数
 ​
 router.get("/",async ctx=>{
     ctx.body=`<h1>Home Page</h1>`
 })
 router.get("/video",async ctx=>{
     ctx.body=`<h1>video Page</h1>`
 })
 app.use(router.routes())              //记得把app和router练习在一起
 ​
 ​
 app.listen(3000,()=>{
     console.log("server is running!")
 })
 -------------------
 启动服务器   node router.js
 关闭服务器   ctrl+c
 -------------------
  访问首页：   http://127.0.0.1:3000/
  访问video页：    http://127.0.0.1:3000/video

 

5.koa框架-静态目录

在网页中插入图片，需要在img标签中填写图片的地址。web应用的服务器，只有静态文件目录的文件才可以被html页面直接访问。

 npm init
 cnpm install --save koa
 cnpm install --save koa-static

创建一个public的文件夹。里面新建一个images文件夹，加入一张rotbar.jpg图片

 const koa=require('koa')
 const app=new koa()
 const static=require('koa-static')
 const context = require('koa/lib/context')
 ​
 //__dirname是当前项目的绝对路径
 app.use(static(__dirname +'/public'));
 app.use(async (ctx)=>{
     ctx.body=`
     <h1>图片的路径是</h1>
     <img src="/images/rotbar.jpg">`
 })
 ​
 ​
 app.listen(3000,()=>{
     console.log("server is running!")
 })
 --------------
 启动服务器 node  static.js
 --------------
 访问图片：http://127.0.0.1:3000/images/rotbar.jpg
 记得把图片路径放置在图片的src属性上
 访问首页：http://127.0.0.1:3000

6.nunjucks 框架

 const koa=require('koa')
 const app=new koa()
 ​
 const nunjucks=require('nunjucks')
 const views=require('koa-views')
 ​
 //用nunjucks引擎渲染html文件
 //views（第一个参数是模板引擎所在的路径，，第二个参数是设置引擎渲染的文件）
 app.use(views(__dirname+'/views',{map:{html:'nunjucks'}
 }))
 app.use(async ctx=>{
     await ctx.render("index",{title:'我的主页home page---'})
     //render(第一个参数的文档的名字（无后缀）,第二个参数可以给模板传递参数)
 })
 ​
 app.listen(3000,()=>{
     console.log('server is running!')
 })
 -------------------
     node nunjucks.js
 -------------------
     访问页面 http://127.0.0.1:3000/
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <title>nunjucks模板引擎</title>
 </head>
 <body>
 ​
 <div class="head"> {{title}}后台传过来的参数</div>
 ​
 </body>
 </html>
 
posted @ 2022-05-16 18:57  cascadingjia  阅读(54)  评论(0)    收藏  举报