init

4 years ago · 14223e89c5
commit 14223e89c5
21 changed files with 449 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
 /yarn.lock
 *.log
 .idea
--- a/12
+++ b/12
@ -0,0 +1,12 @@
 FROM nginx:alpine
 ADD vue.app.conf /etc/nginx/conf.d/
 ADD dist /app
 RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.bak \
 && dos2unix /etc/nginx/conf.d/vue.app.conf
 EXPOSE 9000
 ENTRYPOINT ["nginx","-g","daemon off;"]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/mock/test.ts
+++ b/mock/test.ts
@ -0,0 +1,29 @@
 import {MockMethod} from 'vite-plugin-mock';
 import {sendCodeApi} from "../src/interface";
 const Mock = require('mockjs')
 export default [
    {
        url: sendCodeApi,
        method: 'post',
        response: ({ query }) => {
            return Mock.mock({
                'result':'OK',
                'message':'验证码发送成功'
            })
        },
    },
    {
        url: '/api/post',
        method: 'post',
        timeout: 2000,
        response: {
            code: 0,
            data: {
                name: 'vben',
            },
        },
    },
 ] as MockMethod[];
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
 {
  "name": "bililive_webapp",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vuedx-typecheck . && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "element3": "^0.0.39",
    "mockjs": "^1.1.0",
    "vue": "^3.0.5",
    "vue-router": "4",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.4",
    "@vue/compiler-sfc": "^3.0.5",
    "@vuedx/typecheck": "^0.6.0",
    "@vuedx/typescript-plugin-vue": "^0.6.0",
    "cross-env": "^7.0.3",
    "node-sass": "^5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "typescript": "^4.1.3",
    "vite": "^2.0.0-beta.64",
    "vite-plugin-mock": "^2.1.4"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,51 @@
 <template>
  <el-container>
    <el-header>
        <el-row>
          <el-col :span="4">
            <h1>直播间状态通知</h1>
          </el-col>
          <el-col :span="20">
            <el-menu mode="horizontal" :default-active="activeIndex">
              <el-menu-item index="1"><router-link to="/">主页</router-link></el-menu-item>
              <el-submenu index="2">
                  <template v-slot:title>个人信息</template>
                  <el-menu-item index="2-1">修改密码</el-menu-item>
                  <el-menu-item index="2-2"><router-link to="/email">修改邮箱</router-link></el-menu-item>
                  <el-menu-item index="2-3"><router-link to="">退出登录</router-link></el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
 </template>
 <script lang="ts">
 import {defineComponent, ref} from 'vue'
 export default defineComponent({
  name: 'App',
  setup(){
    const activeIndex=ref<string>('1')
    return {activeIndex}
  }
 })
 </script>
 <style>
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 }
 </style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@ -0,0 +1,11 @@
 .mt{
  &-1{
    margin-top: 1rem;
  }
 }
 .btn-block{
  display: block;
  width: 100%;
 }
--- a/src/components/AsyncComponent.vue
+++ b/src/components/AsyncComponent.vue
@ -0,0 +1,28 @@
 <template>
  <h1>一个异步组件</h1>
 </template>
 <script lang="ts">
 import {defineComponent} from 'vue'
 function sleep(timeout: number | undefined){
  return new Promise(resolve => setTimeout(resolve,timeout))
 }
 export default defineComponent({
  name: "AsyncComponent",
  props:{
    timeout:{
      type:Number,
      required:true
    }
  },
  async setup(props){
    await sleep(props.timeout)
  }
 })
 </script>
 <style scoped>
 </style>
--- a/src/components/Email.vue
+++ b/src/components/Email.vue
@ -0,0 +1,110 @@
 <template>
  <el-row type="flex" justify="center">
    <el-col :span="8">
      <el-input v-model="userEmail" :disabled="true">
        <template v-slot:prepend>当前邮箱</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="8">
      <el-input v-model="newEmail" :disabled="second>0">
        <template v-slot:prepend>新邮箱</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="6">
      <el-input v-model="code">
        <template v-slot:prepend>验证码</template>
      </el-input>
    </el-col>
    <el-col :span="2">
      <el-button type="primary" :disabled="!allowSendCode" @click="sendCode">{{ sendCodeTip }}</el-button>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="mt-1">
    <el-col :span="2">
      <el-button type="primary" class="btn-block" :disabled="!checkCode">更换邮箱</el-button>
    </el-col>
    <el-col :span="2"/>
    <el-col :span="2">
      <el-button type="info" class="btn-block">返回</el-button>
    </el-col>
  </el-row>
 </template>
 <script lang="ts">
 import {computed, defineComponent, ref} from "vue";
 import {changeEmail as _changeEmail, sendCode as _sendCode} from "../request";
 import {useStore} from "vuex";
 import {Message} from 'element3/src/components/Message'
 export default defineComponent<{ userEmail: { require: boolean, type: StringConstructor }, second: { require: boolean, type: NumberConstructor } }>({
  name: 'Email',
  setup(props) {
    const newEmail = ref<string>('')
    const code = ref<string>('')
    const second = ref<number>(0)
    const store=useStore()
    const sendCode = () => {
      second.value=10
      _sendCode(store.state.user.email).then(res=>res.json()).then(res=>{
        if(res.result==='OK'){
          console.info('发送验证码成功')
          new Message({
            showClose: true,
            message: '发送验证码成功',
            type: 'success'
          })
          const t=setInterval(function (){
            if(second.value===0){
              clearInterval(t)
            }else {
              second.value--
            }
          },1000)
        }else{
          second.value=0
          new Message({
            showClose: true,
            message: '发送验证码失败',
            type: 'error'
          })
        }
      })
    }
    const changeEmail=()=> _changeEmail(store.state.user.email,newEmail.value,code.value)
    const allowSendCode = computed<boolean>(() => second.value === 0 && props.userEmail !== newEmail.value && /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(newEmail.value))
    const sendCodeTip = computed<string>(() => second.value > 0 ? second.value + '秒后重发' : '发送验证码')
    const checkCode = computed<boolean>(() => /^\d{6}$/.test(code.value))
    const userEmail= computed(() => store.state.user.email)
    return {
      newEmail,
      code,
      allowSendCode,
      sendCodeTip,
      checkCode,
      second,
      sendCode,
      userEmail,
      changeEmail
    }
  }
 })
 </script>
 <style scoped>
 </style>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@ -0,0 +1,13 @@
 <template>
  <h1>主页</h1>
 </template>
 <script>
 export default {
  name: "Home"
 }
 </script>
 <style scoped>
 </style>
--- a/src/components/Vue3.vue
+++ b/src/components/Vue3.vue
@ -0,0 +1,49 @@
 <template>
  <h1>{{num}}*2={{double}}</h1>
  <h1>{{num2.count}}*3={{triple}}</h1>
  <button @click="add">累加</button>
  <button @click="insert">插入</button>
 </template>
 <script lang="ts">
 import {computed, defineComponent, reactive, ref} from 'vue'
 export default defineComponent({
  name: "Vue3",
  setup:()=>{
    const num=ref<number>(1)
    const isAdd=ref<boolean>(false)
    const num2=reactive<{count:number}>({
      count:1
    })
    function add() {
      num.value++
      num2.count++
    }
    function insert(){
      isAdd.value=true
    }
    function cancel(){
      isAdd.value=false
    }
    const double=computed<number>(()=>num.value*2)
    const triple=computed<number>(()=>num2.count*3)
    return {num,add,double,num2,triple,isAdd,insert,cancel}
  }
 })
 </script>
 <style scoped>
 </style>
--- a/src/interface.ts
+++ b/src/interface.ts
@ -0,0 +1 @@
 export const sendCodeApi='/api/change/email'
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,11 @@
 import {createApp} from 'vue'
 // TypeScript error? Run VSCode command
 // TypeScript: Select TypeScript version - > Use Workspace Version
 import App from './App.vue'
 import Element3 from 'element3'
 import 'element3/lib/theme-chalk/index.css'
 import './assets/scss/style.scss'
 import {store} from "./store";
 import {router} from "./router";
 createApp(App).use(router).use(store).use(Element3).mount('#app')
--- a/src/request.ts
+++ b/src/request.ts
@ -0,0 +1,13 @@
 import {sendCodeApi} from "./interface";
 /**
 * 发送验证码
 * @param userEmail
 */
 export function sendCode(userEmail:string){
    return fetch(new Request(sendCodeApi,{method:'POST',body:JSON.stringify({userEmail})}))
 }
 export function changeEmail(oldEmail:string,newEmail:string,code:string){
 }
--- a/src/router.ts
+++ b/src/router.ts
@ -0,0 +1,22 @@
 // 1. 定义路由组件.
 // 也可以从其他文件导入
 import {createRouter, createWebHashHistory} from "vue-router";
 import Email from "./components/Email.vue";
 import Home from "./components/Home.vue";
 // 2. 定义一些路由
 // 每个路由都需要映射到一个组件。
 // 我们后面再讨论嵌套路由。
 const routes = [
    {path:'/',component: Home},
    { path: '/email', component: Email },
 ]
 // 3. 创建路由实例并传递 `routes` 配置
 // 你可以在这里输入更多的配置，但我们在这里
 // 暂时保持简单
 export const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
 })
--- a/src/store.ts
+++ b/src/store.ts
@ -0,0 +1,16 @@
 import {createStore} from "vuex";
 export const store = createStore({
    state: () => ({
        user: {
            email: '1029559041@qq.com'
        }
    }),
    mutations: {
        setUser(state, user) {
            // @ts-ignore
            state.user = user
        }
    }
 })
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,9 @@
 import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import {viteMockServe} from "vite-plugin-mock";
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue(),viteMockServe({})]
 })
--- a/vue.app.conf
+++ b/vue.app.conf
@ -0,0 +1,9 @@
 server {
    listen 9000;
    location  / {
        root /app;
        index index.html;
        try_files $uri $uri/ /index.html last;
    }
 }
		`@ -0,0 +1 @@`
							`export const sendCodeApi='/api/change/email'`