nestjs学习day2

1.依赖安装

• session 安装

cnpm i express-session --save

cnpm i @type/express-session -D

• element-plus 安装

npm i element-plus --save

• 验证码安装

cnpm i svg-captcha --save

2.代码设置

• 后端代码

//main.js
import {NestFactory} from '@nestjs/core';
import {AppModule} from './app.module';
import {VersioningType} from "@nestjs/common";
import * as session from 'express-session'
async function bootstrap() {
    const app = await NestFactory.create(AppModule);
      app.enableVersioning({
        type:VersioningType.URI
      })
      app.use(session({secret:"xiaoman",rolling:true,
    name:"xiaoman.sid",cookie:{maxAge:99999}}))
      await app.listen(3000);
}
bootstrap();

//controller.js
import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
  Version,
  Request,
  Query,
  Headers,
  HttpCode, Req, Res, Session
} from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
import * as svgCaptcha from 'svg-captcha';
import * as querystring from "querystring";
// @Controller({path:'user',version:"1"})
@Controller('user')

export class UserController {
  constructor(private readonly userService: UserService) {}
  @Get('code')
  createCode(@Req() req,@Res() res, @Session() session){
    const Captcha=svgCaptcha.create({
      size:4,
      fontSize:50,
      height:34,
      background:'#cc9966',
    })
    session.code=Captcha.text;
    res.type('image/svg+xml');
    res.send(Captcha.data);
  }
  @Post('create')
  createUser(@Body() body,@Session() session){
    console.log(body,session.code)
    if(session?.code?.toLocaleLowerCase()===body?.code?.toLocaleLowerCase()){
      return {
        code:200,
        message:"验证码正确"
      }
    }else{
      return {
        code:200,
        message:"验证码错误"
      }
    }
  }

  @Post()
  //@Request()
  create(@Body() body) {
    return {
      code:200,
      msg:body
    }
  }

  @Get()
  // @Version('1')
  // @Request
  findAll(@Query() req) {
    console.log(req);
    return {
      code: 200,
      msg:req.name
    }
  }

  @Get(':id')
  // @Param('id') id: string
  @HttpCode(500)
  findOne(@Request() req, @Headers() headers) {
    return {
      code: 200,
      msg: req.params,
      headers: headers
    };
  }

  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.userService.update(+id, updateUserDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.userService.remove(+id);
  }
}

• 前端代码

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// import router from './router'
const app=createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    port:3001,
    proxy:{
      '/api':{
        target:'http://localhost:3000/',
        changeOrigin:true,
        rewrite:path => path.replace(/^/api/,''),
      }
    }
  },
  plugins: [vue()]
})

<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
  >
    <el-form-item label="username" prop="username">
      <el-input v-model="ruleForm.username"  autocomplete="off" />
    </el-form-item>
    <el-form-item label="passowrd" prop="passowrd">
      <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="img" prop="code">
      <el-input v-model="ruleForm.code" />
      <img :src="codeUrl" alt="code" @click="resetCode">
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
      >Submit</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const codeUrl=ref<string>('/api/user/code')
const resetCode=()=>codeUrl.value=codeUrl.value+'?'+Math.random()
const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  username: '',
  password: '',
  code: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass2, trigger: 'blur' }],
  code: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    fetch('/api/user/create',{
      method:'post',
      body:JSON.stringify(ruleForm),
      headers:{
        'content-type':'application/json'
      }
    }).then(res=>res.json()).then(res=>{
      console.log(res)
    })

  // if (!formEl) return
  // formEl.validate((valid) => {
  //   if (valid) {
  //     console.log('submit!')
  //   } else {
  //     console.log('error submit!')
  //     return false
  //   }
  // })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>