ssr渲染、nuxt、ts

最新推荐文章于 2024-04-10 17:17:02 发布

琴～～

最新推荐文章于 2024-04-10 17:17:02 发布

阅读量619

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/115144835

版权

一.ssr(服务端渲染)

1.定义

server side render:简称服务端渲染.即将组件或者页面通过服务端渲染,最后生成HTML字符串,发送给浏览器,浏览器再将字符串展示为客户端所识别的应用程序.

2.ssr的利弊

优势

1.利于SEO优化,用户体验好
2.首屏加载速度快

缺点

1.增加服务端的压力
2.基于node.js

核心

页面或者组件通过服务端解析,生成HTML字符串.发送给浏览器

3.使用

步骤:
1.新建目录demossr
2.进入demossr目录.新建文件app.js
3.初始化package.json文件:   npm init
4.npm i express --save
5.npm i vue vue-server-renderer --save
6.app.js文件做服务端渲染

// 1.创建服务端
const express = require('express');
const server = express();

// 2.创建vue实例
const Vue = require('vue')
const vm = new Vue({
    data:{
        msg:'成都区域',
        arr:['双流区','金牛区','武侯区','锦江区']
    },
    template:`
        <div>
            <h1>{{msg}}</h1>
            <ul>
                <li v-for='item in arr' :key="item" style="background: greenyellow;">{{item}}</li>
            </ul>
        </div>
    `
})

// 3.创建服务端渲染
const render = require('vue-server-renderer').createRenderer();

// 4.渲染组件并发送给浏览器
server.get('/index',(req,res)=>{
    render.renderToString(vm,(err,html)=>{
        if(err){
            res.send('服务端渲染失败');
            return;
        }
         // 参数html 是渲染成功的一堆HTML字符串
        res.send(html)
    })
   
})

console.log('服务端监听端口为:3000');
server.listen(3000)

二.nuxt

官网地址:https://www.nuxtjs.cn/

1.定义:

使用简便的Vue框架

2.安装

npm i create-nuxt-app -g
create-nuxt-app -v   查看版本

3.创建Vue框架

3-1.步骤:

1.安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8yT4hgn-1616505593285)(C:\Users\Administrator\Desktop\web1102\day13-ssr-nuxt-ts\1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwdWSlFr-1616505593287)(C:\Users\Administrator\Desktop\web1102\day13-ssr-nuxt-ts\2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xOS5ilru-1616505593288)(C:\Users\Administrator\Desktop\web1102\day13-ssr-nuxt-ts\3.png)]

3-2.进入项目

1.cd demonuxt
2.npm run dev

3-3.目录讲解

.nuxt   #存在nuxt项目的配置
assets: #存放静态资源文件 css img js font
		1.在nuxt.config.js文件中引入
		  css: [
                '~/assets/css/reset.css'
              ],
          2.参与压缩打包,
          3.项目中引入图片:
			 <!-- assets静态资源文件 -->
    		<img src="~/assets/food.jpg" alt="">
components: #公共组件, 且文件名称不能修改
			使用: 以文件名作为组件名eg :  <Btn></Btn>  <Btn />
dist:		#项目打包目录
layouts:	#路由布局出口,且文件名称不能修改
			default.vue 默认路由出口文件
middleware	#中间件
pages		#你的代码
plugins		#插件
static		#静态资源文件 css img js
			1.不参与压缩打包
			2.开发环境中引入图片不显示
				<!-- static静态资源文件不再开发环境中显示 -->
    			<img src="/static/img/1.png" alt="">

store		#存放状态管理  文件名称不能修改
nuxt.config.js	#项目配置文件

3-4.layouts布局

如果没有指定布局组件.则默认指向layouts/default 组件中
如果指定了布局组件.则指向layouts/自定义组件 中
如何指定布局组件?
	在要先显示的组件中:
	<script>
        export default {
          // 指定布局组件
          layout:'index'
        }
     </script>

三.ts(typescript)

1.介绍

TypeScript是一种由微软开发的自由和开源的编程语言。
它是JavaScript的一个超集，并且可以编译为纯JavaScript，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程，通俗的理解为JavaScript的一个特殊版本，其语法规范严谨，适用于开发大型项目运用。更有甚者描述，es的最终走向规范都将会是TypeScript。

目的:其目的是对值的结构进行类型检测

官网地址:https://www.tslang.cn/

2.安装

npm i typescript -g

3.使用

3-1.第一次使用ts

1.声明一个文件test.ts
	function fn(name){
        return name+'你好'

    }

    let user = '刘劲';

    document.body.innerHTML = fn(user)
2.打开当前test.ts所在目录窗口, tsc test.ts
3.执行结果:在当前目录中产生一个test.js文件

3-2.实际应用

项目搭建
1.新建目录demots1
2.打开demots1窗口,  tsc --init   执行结果:产生一个tsconfig.json
3.修改tsconfig.json文件
	{
        "compilerOptions":{
            "outDir": "./dist",   
        },
         "include": ["./src"]
    }

4.语法

4-1.变量的定义

// 变量的定义
/**
 * 1.值是什么类型,变量就是什么类型
 * 2.声明的变量时什么类型,其值是什么类型
 * 3.只声明变量的类型,其值在后面的操作可进行赋值操作
 */
// 方式一
var num = 10;
// num = '20';

// 方式二
var num1:number = 30;//[推荐]

// 方式三
var num2:number;

4-2.变量的类型

string number boolean

// string number boolean
var str:string = 'hello';
var num3:number = 888;
var bool:boolean = true;

数组

// 数组
// 声明一个空数组
var arr:[] = [];
// 声明一个number类型的数组
var arr1:number[] = [];
// 声明一个string类型的数组
var arr2:string[] = [];
arr2 = ['aa','bb','cc'];

元组

// 元组
// 声明元组,一个不能多,一个不能少,而且类型还得匹配上.
var arr3:[string,number,boolean] = ['hello',666,true];

枚举

enun
// 枚举类型
/**
 * 1.枚举类型,名称可以自定义,但是首字母必须大写
 * 2.枚举类型没有指定值时,其结果显示为下标的值.
 */
enum Sex{
    man,
    women,
    renyao,
}

let s1:Sex = Sex.man;//0
let s2:Sex = Sex.women;//1
let s3:Sex = Sex.renyao;//2


enum Method{
    get = 'GET',
    post = 'POST',
}
let m1:Method = Method.get;
let m2:Method = Method.post;


enum OrderStatus {
    unpaid = '未支付',
    finished = '已完成',
    shipped = '已发货',
    collect  = '待收货',
}
let o1:OrderStatus = OrderStatus.shipped;
let o2:OrderStatus = OrderStatus.collect;

any

// any  任何类型
/**
 * 1.后端返回给前端的数据
 * 2.dom元素节点可以设置为any
 */
let a:any = 10;
a = '123';
a = true;
a = [1,2,3];

window.onload = function(){
    a  = document.getElementById('main');
    console.log(a);
}

void

// void 函数没有返回值
function fn():void{
    console.log('该函数没有返回值');
}
fn()

object

// object
let obj:object = {
    name:'杨延琴',
    age:18,
    boyFriend:true
}

let obj1:object[] = [];
obj1 = [
    {
        id:1,
        star:'贾玲'
    }
]

// obj1 = [1,2,3,4];//错误写法

undefiend null

// undefined  null
let str2 = undefined;
let str3 = null;
let str4:number | undefined;
let str5:string | null;

4-3.函数

1.函数中参数需要指定数据类型
2.函数中返回值需要指定数据类型

定义

// 函数的定义
//有返回值,有参数
function fn(a:number,b:number):number{
    return a * b;
}

// 无返回值,有参数
function fn1(a:number):void{
    console.log(a);
    // return a//错误写法
    
}

默认参数

//默认参数
function fn2(a:number,b:number = 20):number{
    return a + b
}
// console.log(fn2(20));
// console.log(fn2(30,40));

可选参数

// 可选参数
function fn3(a:number,b?:number):number{
    if(b){
        return a + b
    }else{
        return a * a
    }
}
console.log(fn3(20));
console.log(fn3(20,44));

剩余参数

// 剩余参数
function fn4(a:number,...sheng:number[]):void{
   console.log(sheng);
}
// fn4(10,20,30,40,50)
// fn4(30)


function fn5(a:number,...child:number[]):number{
   let sum = 0;
   child.forEach(item=>{
       sum += item
   })
   return sum*a
}
console.log(fn5(100,2,3,4,5,6,7,8,9));

箭头函数

// 箭头函数
let priceFilter = (price:number)=>price.toFixed(2)
console.log(priceFilter(30.90));

4-4.类的定义

1.声明

/**
 * 声明一个类
 * 1.属性需要定义数据类型
 * 2.方法中的参数和返回值需要定义数据类型
 */
class Person{
    name:string;
    // 作用:  为对象进行初始化赋值操作
    constructor(name:string){
        this.name = name
    }
    say():void{
        console.log(this.name+'说:下午好!');
        
    }
}
let p = new Person('小刚')
console.log(p.name);
p.say();

3.继承

// 继承
class Animal{
    name:string
    constructor(name:string){
        this.name = name
    }
    walk(n:number):void{
        console.log(this.name+'走了'+n+'km');
        
    }
}
class Dog extends Animal{
    age:number;
    constructor(name:string,age:number){
        super(name)
        this.age = age;
    }
    walk():void{
        super.walk(1)
        console.log(this.name+'今年'+this.age+'岁');
    }
}
let taidi = new Dog('泰迪',3)
taidi.walk()

3.访问修饰限定符

public

// 类修饰符   protected private
// 在类外 类内 子类中是否能被访问

/**
 * public访问修饰限定符修饰的属性和方法
 * 在类外 类内 子类中都可以被访问
 */
class People{
    public name:string;
    constructor(name:string){
        this.name = name
    }
}
class Man extends People{
    constructor(name:string){
        super(name)
    }
    say():void{
        console.log(this.name);
        
    }
}

// let p = new People('赵丽颖');
// let guoqilin = new Man('郭麒麟');
// console.log(guoqilin.name);

protected

// protected
/**
 * protected访问修饰限定符修饰的属性和方法
 * 在类外不能被访问
 * 在类内和子类中可以被访问
 */
class Car{
   protected color:string;
   constructor(color:string){
       this.color = color
   }
   public run():void{
    console.log(this.color);
   }
}

class Bus extends Car{
    constructor(color:string){
        super(color)
    }
    run(){
        console.log(this.color);
        
    }
}

let c = new Car('black')
// console.log(c.color);
// c.run()
let bus = new Bus('blue');
// bus.run()

private

// private
/**
 * private访问修饰限定符修饰的属性和方法
 * 在类内可以被访问
 * 在类外 子类中不能为访问
 */
class Tu{
    private chang:number = 20;
    constructor(){

    }
    zhouchang():void{
        console.log(this.chang);
    }
}
class Circle extends Tu{
    constructor(chang:number){
        super()
    }
    zhouchang():void{
        // 在子类中不能访问父类的私有属性
        // console.log(this.chang);
        
    }
}
let t = new Tu()
t.zhouchang()

4.静态成员

// 静态成员 static
/**
 * 1.采用关键字static声明的属性和方法都属于静态成员
 * 2.需要使用类名进行访问
 * 3.静态成员属性一旦声明,就已经有初始值了.
 */
class Util{
    static num:number = 30;
    static fun():number{
        return this.num++;
    }
}
// console.log(Util.num);
console.log(Util.fun());//30
console.log(Util.fun());//31
console.log(Util.fun());//32
console.log(Util.fun());//33
console.log(Util.fun());//34

5.抽象类

// 抽象类  采用关键字abstract
/**
 * 1.抽象类中可以没有抽象方法,
 * 2.抽象方法必须存在于抽象类中
 * 3.在派生来中需要实现抽象类中所有的抽象方法
 */
abstract class Tu1{
    abstract getLength():number
    abstract getArea():number
}

// 派生类

class ChangFangXing extends Tu1{
    width:number;
    height:number;
    constructor(width:number,height:number){
        super()
        this.width = width;
        this.height = height
    }
    getLength():number{
        return (this.width+this.height)*2
    }
    getArea():number{
        return this.width*this.height
    }
}
// let c1 = new ChangFangXing(20,30)
// console.log(c1.getLength());
// console.log(c1.getArea());


class Circle1 extends Tu1{
    r:number;
    constructor(r:number){
        super()
        this.r = r
    }
    getLength():number{
        return 2*Math.PI*this.r
    }
    getArea():number{
        return Math.PI*this.r*this.r
    }
}
let c2 = new Circle1(3)
console.log(c2.getLength());
console.log(c2.getArea());