<template>
  <div>首页</div>
</template>

<script>
export default {
  name: 'Index'
}
</script>
<style scoped></style>

import { createRouter, create
WebHistory, Route
RecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () => 
import('../views/Index.vue')
  },
]

const router = createRouter({
  history: create
WebHistory(process.env.BASE_URL),
  routes
})

export default router

/**
 * Eric Meyer's Reset CSS v2.0 
(http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, 
applet, object, iframe,
 h1, h2, h3, h4, h5,
 h6, p, blockquote, pre,
 a, abbr, acronym, address
, big, cite, code,
 del, dfn, em, img, ins,
 kbd, q, s, samp,
 small, strike, strong, sub
, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, 
tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption,
footer, header, hgroup, 
 menu, nav, output, ruby
, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for 
older browsers */
 article, aside, details, 
figcaption, figure, 
 footer, header, hgroup, 
menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   -webkit-backface-
visibility: hidden;
 }
 ::-webkit-scrollbar{
   width: 5px;
   height: 5px;
 }
 ::-webkit-scrollbar-track-piece{
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:vertical{
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:horizontal{
   width: 5px;
   background-color: 
rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 html, body{
   width: 100%;
   font-family: "Arial", 
"Microsoft YaHei", "黑体",
 "宋体", "微软雅黑", sans-serif;
 }
 body{
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-
color: rgba(0, 0, 0, 0);
 }
 html{
   overflow-y: scroll;
 }
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }
  
 /*隐藏*/
 .dn{
   display: none;

<template>
  <div class="container">
    <!-- form表单容器 -->
    <div class="form-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <h1>登录</h1>
        <!-- 注册 -->
        <h1>注册</h1>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginRegister'
}
</script>
<style scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  overflow: hidden;
}
.form-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.signin-signup {
  position: relative;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 44%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}
</style>

<template>
  <div class="not-found">
    <img src="../
assets/img/404.gif" alt="" />
  </div>
</template>

<script>
export default {
  name: '404'
}
</script>
<style lang="scss" scoped>
.not-found {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

npm i element-plus

setup() {
    // 登录/注册模式
    const signUpMode = ref(false)
    // 登录表单
    const loginUser = reactive({
      email: '',
      password: ''
    })
    return { signUpMode, loginUser }
  }

<!-- 登录 -->
<el-form
  :model="loginUser"
  label-width="100px"
  class="login-form sign-in-form"
>
  <el-form-item label=
"邮箱" prop="email">
    <el-input v-model="
loginUser.
email" placeholder="Enter Email..." />
  </el-form-item>
  <el-form-item label="密
码" prop="password">
    <el-input
      v-model="loginUser.password"
      type="password"
      placeholder="Enter Password..."
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary"
 class="submit-btn">提交</el-button>
  </el-form-item>
  <!-- 找回密码 -->
  <el-form-item>
    <p class="tiparea">忘记
密码<a>立即找回</a></p>
  </el-form-item>
</el-form>

// 校验规则
const rules = reactive({
  email: [
    {
      required: true,
      type: 'email',
      message: 'email格式错误',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message:
 '密码不得为空', trigger: 'blur' },
    { min: 6, max: 30, message: '
密码长度必须在6到30之间', trigger: 'blur' }
  ]
})

<template>
  <div class="container" :class
="{ 'sign-up-mode': signUpMode }">
    <!-- form表单容器 -->
    <div class="form-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <el-form
          :model="loginUser"
          :rules="rules"
          ref="loginForm"
          label-width="100px"
          class="login-form 
sign-in-form"
        >
          <el-form-item label="
邮箱" prop="email">
            <el-input v-model="
loginUser.email" placeholder=
"Enter Email..." />
          </el-form-item>
          <el-form-item label="
密码" prop="password">
            <el-input
              v-model="login
User.password"
              type="password"
              placeholder="Enter Password..."
            />
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleLogin
('loginForm')"
              type="primary"
              class="submit-btn"
              >提交</el-button
            >
          </el-form-item>
          <!-- 找回密码 -->
          <el-form-item>
            <p class="tiparea">
忘记密码<a>立即找回</a></p>
          </el-form-item>
        </el-form>
        <!-- 注册 -->
        <!-- <h1>注册</h1> -->
      </div>
    </div>
    <!-- 左右切换动画 -->
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>Row,row,row your boat</h3>
          <p>Gentlely down the stream</p>
          <button @click="signUpMode =
 !signUpMode" class="btn transparent">
            注册
          </button>
        </div>
        <!-- <img src="@/assets" alt=""> -->
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>Merrily,
merrily,merrily,merrily,</h3>
          <p>Life is but a dream</p>
          <button @click="signUpMode
 = !signUpMode" class="btn transparent">
            登录
          </button>
        </div>
        <!-- <img src="@/assets" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, 
getCurrentInstance } from 'vue'
export default {
  name: 'LoginRegister',
  components: {},
  // Vue3语法糖
  // Vue2是通过data和methods
传递数据和方法
  // Vue3将data和methods直接
耦合在了一起
  setup() {
    // 通过解构get
CurrentInstance，获取this，
这里的this就是ctx
    const { ctx } = 
getCurrentInstance()
    // 登录/注册模式
    const signUpMode = ref(false)
    // 登录表单
    const loginUser = reactive({
      email: '',
      password: ''
    })
    // 校验规则
    const rules = reactive({
      email: [
        {
          required: true,
          type: 'email',
          message: 'email格式错误',
          trigger: 'blur'
        }
      ],
      password: [
        { required: true, 
message: '密码不得为空', trigger: 'blur' },
        { min: 6, max: 30, 
message: '密码长度必须在6到30
之间', trigger: 'blur' }
      ]
    })
    // 触发登录方法
    const handleLogin = (formName) => {
      console.log(ctx)
      ctx.$refs[formName].
validate((valid) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    return { signUpMode,
 loginUser, rules, handleLogin }
  }
}
</script>

import { ref,
 reactive  } from 'vue'

// 登录表单
export const loginUser = reactive({
  email: '',
  password: ''
})

// 校验规则
export const rules = reactive({
  email: [
    {
      required: true,
      type: 'email',
      message: 'email格式错误',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message
: '密码不得为空', trigger: 'blur' },
    { min: 6, max: 30, message
: '密码长度必须在6到30之间'
, trigger: 'blur' }
  ]
})

import { ref, reactive  }
 from 'vue'

interface User{
  email: string;
  password: string;
}

// 登录表单
export const loginUser = 
reactive<User>({
  email: '',
  password: ''
})

interface Rules{
  email: {
      required: boolean;
      type: string;
      message: string;
      trigger: string;
  }[];
  password: ({
      required: boolean;
      message: string;
      trigger: string;
      min?: undefined;
      max?: undefined;
  } | {
      min: number;
      max: number;
      message: string;
      trigger: string;
      required?: undefined;
  })[];
}

// 校验规则
export const rules =
 reactive<Rules>({
  email: [
    {
      required: true,
      type: 'email',
      message: 'email格式错误',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message:
 '密码不得为空', trigger: 'blur' },
    { min: 6, max: 30, 
message: '密码长度必须在6到
30之间', trigger: 'blur' }
  ]
})

<template>
  <!-- 登录 -->
  <el-form
    :model="loginUser"
    :rules="rules"
    ref="loginForm"
    label-width="100px"
    class="login-form sign-in-form"
  >
    <el-form-item label="邮箱" prop="email">
      <el-input v-model=
"loginUser.email" 
placeholder="Enter Email..." />
    </el-form-item>
    <el-form-item label="密
码" prop="password">
      <el-input
        v-model="loginUser.password"
        type="password"
        placeholder="Enter Password..."
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="handleLogin('loginForm')"
        type="primary"
        class="submit-btn"
        >提交</el-button
      >
    </el-form-item>
    <!-- 找回密码 -->
    <el-form-item>
      <p class="tiparea">忘
记密码<a>立即找回</a></p>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { getCurrent
Instance } from 'vue'
export default {
  name: 'LoginForm',
  props: {
    loginUser: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    }
  },
  setup() {
    // 通过解构getCurrentInstance，
获取this，这里的this就是ctx
    // @ts-ignore
    const { ctx } = 
getCurrentInstance()
    // 触发登录方法
    const handleLogin = (
formName: string) => {
      console.log(ctx)
      ctx.$refs[formName].
validate((valid: boolean) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    return { handleLogin }
  }
}
</script>
<style scoped>
/* register */
.login-form,
.register-form {
  background-color: #fff;
  padding: 50px 80px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
  width: 100%;
}
.tiparea a {
  color: #409eff;
}
</style>

import { reactive  } from 'vue'

interface RegisterUser{
  name:string;
  email: string;
  password: string;
  password2: string;
  role:string
}

// 登录表单
export const registerUser =
 reactive<RegisterUser>({
  name:'',
  email: '',
  password: '',
  password2: '',
  role:''
})

interface RegisterRules{
  name: {
    required: boolean;
    message: string;
    trigger: string;
}[];
  email: {
      required: boolean;
      type: string;
      message: string;
      trigger: string;
  }[];
  password: ({
      required: boolean;
      message: string;
      trigger: string;
  } | {
      min: number;
      max: number;
      message: string;
      trigger: string;
  })[];
  password2: ({
      required: boolean;
      message: string;
      trigger: string;
  } | {
      min: number;
      max: number;
      message: string;
      trigger: string;
  } | {
    validator:(rule: 
RegisterRules, value: string, callback: any)=>any;
    trigger:string
  })[];
  role: {
    required: boolean;
    message: string;
    trigger: string;
}[];
}

const validatePass2 = (rule:
 RegisterRules, value:
 string, callback: any) => {
  if (value === '') {
    callback(new Error(
'请再次输入密码'))
  } else if (value !== 
registerUser.password) {
    callback(new Error(
"两次输入的密码不一致!"))
  } else {
    callback()
  }
}

// 校验规则
export const registerRules =
 reactive<RegisterRules>({
  name: [
    {
      required: true,
      message: '用户名不得为空',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      type: 'email',
      message: 'email格式错误',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message:
 '密码不得为空', trigger: 'blur' },
    { min: 6, max:
 30, message: '密码长度必须在6到30
之间', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: 
'确认密码不得为空', trigger: 'blur' },
    { min: 6, max: 30, message:
 

'密码长度必须在6到30之', trigger: 'blur' },
    { validator: validatePass2
, trigger: 'blur' }
  ],
  role: [
    {
      required: true,
      message: '角色不得为空',
      trigger: 'blur'
    }
  ],
})

<template>
  <!-- 登录 -->
  <el-form
    :model="registerUser"
    :rules="registerRules"
    ref="registerForm"
    label-width="100px"
    class="register-form sign-up-form"
  >
    <el-form-item labe
l="用户名" prop="name">
      <el-input v-model=
"registerUser.name"
 placeholder="Enter Name..." />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model=
"registerUser.email" 
placeholder="Enter Email..." />
    </el-form-item>
    <el-form-item label="密
码" prop="password">
      <el-input
        v-model="registerUser.password"
        type="password"
        placeholder="Enter Password..."
      />
    </el-form-item>
    <el-form-item label="确认
密码" prop="password2">
      <el-input
        v-model="registerUser.password2"
        type="password"
        placeholder="Enter Password again..."
      />
    </el-form-item>
    <el-form-item label="角色" prop="role">
      <el-select v-model="registerUser.role">
        <el-option label="管理
员" value="admin"></el-option>
        <el-option label="用
户" value="user"></el-option>
        <el-option label="游
客" value="visitor"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        @click="handleReg
ister('registerForm')"
        type="primary"
        class="submit-btn"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { getCurrent
Instance } from 'vue'
export default {
  name: 'registerForm',
  props: {
    registerUser: {
      type: Object,
      required: true
    },
    registerRules: {
      type: Object,
      required: true
    }
  },
  setup() {
    // 通过解构getCurrentInstance，
获取this，这里的this就是ctx
    // @ts-ignore
    const { ctx } = getCurrentInstance()
    // 触发登录方法
    const handleRegister = (
formName: string) => {
      console.log(ctx)
      ctx.$refs[formName].
validate((valid: boolean) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    return { handleRegister }
  }
}
</script>
<style scoped>
/* register */
.login-form,
.register-form {
  background-color: #fff;
  padding: 50px 80px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
  width: 100%;
}
.tiparea a {
  color: #409eff;
}
</style>

import axios,{AxiosReques
Config,AxiosResponse} from 'axios'
import { ElLoading } 
from 'element-plus'
import { ElMessage } 
from 'element-plus'

let loading:any;
const startLoading = () =>{
  interface Options{
    lock: boolean;
    text: string;
    background: string;
}
  const options:Options = {
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  }
  loading = ElLoading.service(options)
}
const endLoading = ()=>{
  loading.close()
}


// 请求拦截
axios.interceptors.request.use((
config:AxiosRequestConfig<any>)=>{
  // 开始Loading
  startLoading()
  return config
})

// 响应拦截
axios.interceptors.response.
use((res:AxiosResponse<any, any>)=>{
  // 结束Loading
  endLoading()
  // console.log('成功响应拦截',res)
  // 如果请求成功直接返回响应数据
  if(res.status === 200){
    return res.data
  }
},error=>{
  // 结束Loading
  endLoading()
  // console.log('失败响应拦截',error)
  const { response: res } = error
  const msg = typeof res.data
 === 'string' ? res.data:
 res.data.error || '请求失败，请稍后重试'
  ElMessage.error(msg)
  // 错误提醒
  return Promise.reject(error)
})

export default axios

module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    // 设置跨域
    proxy: {
      '/api': {
        target: 'http://
imissu.herokuapp.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^api': ''
        }
      }
    },
    before: (app) => {}
  }
}

<template>
  <!-- 登录 -->
  <el-form
    :model="registerUser"
    :rules="registerRules"
    ref="registerForm"
    label-width="100px"
    class="register-form sign-up-form"
  >
    <el-form-item label="用户名" prop="name">
      <el-input v-model=
"registerUser.name" placeholder="Enter Name..." />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model=
"registerUser.email" placeholder="Enter Email..." />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="registerUser.password"
        type="password"
        placeholder="Enter Password..."
      />
    </el-form-item>
    <el-form-item label="确认
密码" prop="password2">
      <el-input
        v-model="registerUser.password2"
        type="password"
        placeholder="Enter Password again..."
      />
    </el-form-item>
    <el-form-item label="角色" prop="role">
      <el-select v-model="registerUser.role">
        <el-option label="管
理员" value="admin"></el-option>
        <el-option label="用
户" value="user"></el-option>
        <el-option label="游
客" value="visitor"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        @click="handleRegister
('registerForm')"
        type="primary"
        class="submit-btn"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { getCurrentInstance } from 'vue'
import { useRouter } 
from 'vue-router'
import { register } 
from '@/api/loginRegister'
// import { ElMessage }
 from 'element-plus'
export default {
  name: 'registerForm',
  props: {
    registerUser: {
      type: Object,
      required: true
    },
    registerRules: {
      type: Object,
      required: true
    }
  },
  setup(props: any) {
    // 通过解构getCurrentInstance，获
取this，这里的this就是ctx
    // @ts-ignore
    const { ctx, proxy } = 
getCurrentInstance()
    const router = useRouter()
    // 触发登录方法
    const handleRegister = 
(formName: string) => {
      console.log(ctx)
      ctx.$refs[formName].
validate(async (valid: boolean) => {
        if (valid) {
          // const res = await proxy.$http({
          //   url: '/api/v1/auth/register',
          //   method: 'post',
          //   headers: {
          //     'Content-Type': 
'application/json;charset=UTF-8'
          //   },
          //   data: props.registerUser
          // })
          const res = await 
register(props.registerUser)
          proxy.$message.
success(res.data)
          router.push('/')
        } else {
          return false
        }
      })
    }
    return { handleRegister }
  }
}
</script>
<style scoped>
/* register */
.login-form,
.register-form {
  background-color: #fff;
  padding: 50px 80px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 12px;
  color: #333;
  width: 100%;
}
.tiparea a {
  color: #409eff;
}
</style>

import axios from '@/utils/http'
app.config.
globalProperties.$http = axios

// @ts-ignore
const { ctx, proxy } 
= getCurrentInstance()

const res = await proxy.$http({
  url: '/api/v1/auth/register',
  method: 'post',
  headers: {
    'Content-Type': 
'application/json;charset=UTF-8'
  },
  data: props.registerUser
})