DEV Community: ChuangWANG

Create a npm project and install typescript dependency

ChuangWANG — Fri, 21 May 2021 03:27:22 +0000

Type of package installation with npm:
npm install -g packageName Install global
npm install --save -dev pacakgeName Install locally
npm install --save packageName Install locally
when run npm install --production or env variable NODE_ENV value is production, only packages in dependencies will be install, but packages in devDependencies will not.

npm install -g packageName
npm install --save-dev packageName
npm install --save packageName

Create a new folder for this project
run npm init in the work folder above mentioned

npm init

after we run npm init, we will get a new file named package.json,the file content as bellow:

{
  "name": "typescript-learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

now we should insert code line "type": "module", in package.json to support ES5

After we insert the new code line ,the package.json as bellow:

{
  "name": "typescript-learn",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

note: let the browser support ES5 ，we can insert line as bellow:

<script type="module" src="xxxxx.js"></script>

Now, we will install typescript dependency:
npm install typescript --save-dev

This demo location: code-repo/learn-test/typescript-learn
Git link:

j

ChuangWANG — Fri, 21 May 2021 02:34:47 +0000

Element-UI

ChuangWANG — Wed, 19 May 2021 03:19:51 +0000

ElementUI rules format

note: the rules should in data() {}

data () {
  return {
    rules: {
        productKey: { required: true, message: '请选择产品', trigger: 'change' },
        // errorCode: { required: true, message: '请填写故障代码', trigger: ['change', 'blur'] },
        errorNum: { required: true, message: '请填写故障位', trigger: ['change', 'blur'] },
        errorDesc: { required: true, message: '请填写故障详情', trigger: ['change', 'blur'] }
      },
  }
}

Form validate trigger by event

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
}

Generate clicking event in js

ChuangWANG — Sun, 16 May 2021 00:25:07 +0000

Get DOM element is javascript

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
document.getElementsByClassName()
// Parameter same to parameter css selector
document.querySelector()  
document.querySelectorAll()
// Specific for getting html element
document.documentElement()  
// Specific for getting body element
document.body()

Generate clicking event in js

<html>  
    <head>  
        <title>usually function</title>  
    </head>  
    <script>  

function load(){  
    //下面两种方法效果是一样的  
    document.getElementById("target").onclick();  
    document.getElementById("target").click();  
}  

function test(){  
    alert("test");  
}  

</script>  
    <body onload="load()">  
        <button id="target" onclick="test()">test</button>  
    </body>  
<html>

Remark.

btnObj.click() is to actually click the button with the program, triggering the button's onclick() event

btnObj.onclick() simply calls the method pointed to by btnObj's onclick, which is just a method call and does not trigger the event.

CSS

ChuangWANG — Fri, 14 May 2021 08:11:29 +0000

English website ref:
https://www.w3schools.com/cssref/css_selectors.asp
Chinese website ref:
https://www.runoob.com/cssref/css-selectors.html
Select all element and set background color:

* { 
  background-color:yellow;
}

Select all element inclosed by div:

div * {
  background-color:yellow;
}

Class selector:

.intro {
  // select all elements their has class="intro" marker
}

Id selector:

#firstname {
  // select all elements their has id="firstname" marker
}

Element selector:

div {
  // all div tag will be selected
}

Element,Element selector:

div,span {
  // select all div and span tag
}

Element Element selector:

div span {
  // select all span tags that inclosed by div tag
}

Element>Element selector:

div>p {
  // select all p elements their father element is div
}

20210505

ChuangWANG — Wed, 05 May 2021 08:01:27 +0000

// in main =.js
Vue.prototype.$appName = 'My App'

////in components 
 console.log(this.$appName)

Vue3.0 & Vue2.0

ChuangWANG — Wed, 05 May 2021 07:37:18 +0000

Vue 3:

in vue2 the syntic si right:
@keyup.enter.native="dataFormSubmit()
vue 回车触发聚焦 @keyup.enter.native
12:84  error  '.native' modifier on 'v-on' directive is deprecated  vue/no-deprecated-v-on-native-modifier

ref link: https://eslint.vuejs.org/rules/no-deprecated-v-on-native-modifier.html

<template>
  <!-- ✓ GOOD -->
  <CoolInput v-on:keydown.enter="onKeydownEnter" />
  <CoolInput @keydown.enter="onKeydownEnter" />

  <!-- ✗ BAD -->
  <CoolInput v-on:keydown.native="onKeydown" />
  <CoolInput @keydown.enter.native="onKeydownEnter" />
</template>

Vue-3.x & Element-UI-3.x simple demo

ChuangWANG — Wed, 05 May 2021 06:35:39 +0000

<html> 
    <head>  
        <script src="https://unpkg.com/vue@next"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    </head>
    <body>
        <h1>Today is a good day.</h1>
        <div id="app">
            <el-button type="primary">{{ message }}</el-button>
        </div>
        <script>
            const App = {
                data() {
                    return {
                        message: "Hello Element Plus",
                    };
                },
            };
            const app = Vue.createApp(App);
            app.use(ElementPlus);
            app.mount("#app");
        </script>

    </body>
</html>

Vue-3.x & Element-UI-3.x simple demo

ChuangWANG — Wed, 05 May 2021 06:34:28 +0000

<html>
    <head>  
        <script src="https://unpkg.com/vue@next"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>

    </head>
    <body>
        <h1>Today is a good day.</h1>
        <div id="app">
            <el-button type="primary">{{ message }}</el-button>
        </div>
        <script>
            const App = {
                data() {
                    return {
                        message: "Hello Element Plus",
                    };
                },
            };
            const app = Vue.createApp(App);
            app.use(ElementPlus);
            app.mount("#app");
        </script>

    </body>
</html>

Vue router demo

ChuangWANG — Tue, 04 May 2021 03:16:21 +0000

<html>
  <head>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
  </head>
  <body>
    <div id="app">
    <h1>Hello App!</h1>
      <p>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
      </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      // 1. 定义路由组件.
      // 也可以从其他文件导入
      const Home = { 
        template: '<div>{{this.age}}</div><button @click="goToDashboard">button</button>',
        created() {
          console.log("....${this.username}")
          console.log(this.username)
          console.log(this.age)

        },
        data() {
          return {
            age: 24
          }
        },
        computed: {
          username() {
            // 我们很快就会看到 `params` 是什么
            return 2
            // return this.$route.params.username
          },
        },
        methods: {
          goToDashboard() {
            if (true) {
              console.log(this.$route.params)
              this.$router.push('/test')
            } else {
              this.$router.push('/login')
            }
          }
        }
      }
      const About = { template: '<div>About</div>' }

      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      // 我们后面再讨论嵌套路由。
      const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About },
        { path: '/test', component: Home}
      ]

      // 3. 创建路由实例并传递 `routes` 配置
      // 你可以在这里输入更多的配置，但我们在这里
      // 暂时保持简单
      const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes, // `routes: routes` 的缩写
      })

      // 5. 创建并挂载根实例
      const app = Vue.createApp({})
      //确保 _use_ 路由实例使
      //整个应用支持路由。
      app.use(router)

      app.mount('#app')

      // 现在，应用已经启动了！
    </script>
  </body>
</html>

20210504

ChuangWANG — Tue, 04 May 2021 02:59:45 +0000

Get the URL which shows in the explorer HTTP URL bar:

console.log(window.location.href)
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params

Change the URL by pushing a path:

this.$router.push('/test')

A vue-router demo:
We assume you has vue-router.js in your html script src:

  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/test', component: Home}
  ]

  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })
  const app = Vue.createApp({})
  app.use(router)
  app.mount('#app')

模块化编程中使用createWebHashHistory：

import { createRouter, createWebHashHistory } from 'vue-router'
import UserPost from './views/UserPost.vue'

export const router = createRouter({
  history: createWebHashHistory(),
  routes: [{ path: '/users/:username/posts/:postId', component: UserPost }],
})

模块化编程中使用createWebHistory:

import { createRouter, createWebHistory } from 'vue-router'
import UserPost from './views/UserPost.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/users/:username/posts/:postId', component: UserPost }],
})

The webmanager router:

/**
 * 全站路由配置
 *
 * 建议:
 * 1. 代码中路由统一使用name属性跳转(不使用path属性)
 */
import Vue from 'vue'
import Router from 'vue-router'
import http from '@/utils/httpRequest'
import { isURL } from '@/utils/validate'
import { clearLoginInfo } from '@/utils'
import store from '@/store'

Vue.use(Router)

// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有生产环境使用懒加载
const _import = require('./import-' + process.env.NODE_ENV)

// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/login', component: _import('common/login'), name: 'login', meta: { /* title: '登录' */ } }
]

// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' },
  meta: { title: '主入口整体布局' },
  children: [
    // 通过meta对象设置路由展示方式
    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
    // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
    { path: '/home', component: _import('common/home'), name: 'home', meta: { /* title: '首页' */ } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
    // 产品详情页
    { path: '/product/:id', component: _import('modules/product/detail'), name: 'product-detail', meta: { title: '产品详情', isTab: true } }
    // 【ota 升级】升级记录 / 测试记录
    //{ path: '/ota/:id', component: _import('modules/ota/upgrade/history'), name: 'ota-history', meta: { title: 'ota记录', isTab: true }, props: true },
    // 【ota 升级】单个升级详情 / 单个测试详情
    //{ path: '/ota/:otaId/job/:type/:id', component: _import('modules/ota/upgrade/job'), name: 'ota-job', meta: { title: 'ota任务详情', isTab: true }, props: true },
    // 【ota 升级】版本历史
    //{ path: '/ota/:id/version-history', component: _import('modules/ota/upgrade/version-history'), name: 'ota-version-history', meta: { title: 'ota版本历史', isTab: true }, props: true }
  ],
  beforeEnter (to, from, next) {
    const token = Vue.cookie.get('token')
    if (!token || !/\S/.test(token)) {
      clearLoginInfo()
      next({ name: 'login' })
    }
    next()
  }
}

const router = new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})

const defaultPageTitle = 'TcloudWeb Admin'

router.beforeEach(async (to, from, next) => {
  document.title = to.meta.title ? `${to.meta.title} - ${defaultPageTitle}` : defaultPageTitle

  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
    next()
  } else {
    const { data } = await http({
      url: http.adornUrl('/sys/menu/nav'),
      method: 'get',
      params: http.adornParams()
    }).catch((e) => {
      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
      router.push({ name: 'login' })
    })
    if (data && data.code === 200) {
      fnAddDynamicMenuRoutes(data.menuList)
      router.options.isAddDynamicMenuRoutes = true
      // sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
      // sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]'))
      store.commit('user/updateMenu', data.menuList)
      store.commit('user/updatePermissions', data.permissions)
      next({ ...to, replace: true })
    } else {
      // sessionStorage.setItem('menuList', '[]')
      // sessionStorage.setItem('permissions', '[]')
      store.commit('user/updateMenu', [])
      store.commit('user/updatePermissions', [])
      next()
    }
    // catch((e) => {
    //   console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
    //   router.push({ name: 'login' })
    // })
  }
})

/**
 * 判断当前路由类型, global: 全局路由, main: 主入口路由
 * @param {*} route 当前路由
 * @param globalRoutes
 */
function fnCurrentRouteType (route, globalRoutes = []) {
  let temp = []
  for (let i = 0; i < globalRoutes.length; i++) {
    if (route.path === globalRoutes[i].path) {
      return 'global'
    } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
      temp = temp.concat(globalRoutes[i].children)
    }
  }
  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
}

/**
 * 添加动态(菜单)路由
 * @param {*} menuList 菜单列表
 * @param {*} routes 递归创建的动态(菜单)路由
 */
function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
  let temp = []
  for (let i = 0; i < menuList.length; i++) {
    if (menuList[i].list && menuList[i].list.length >= 1) {
      temp = temp.concat(menuList[i].list)
    } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
      menuList[i].url = menuList[i].url.replace(/^\//, '')
      const route = {
        path: menuList[i].url.replace('/', '-'),
        component: null,
        name: menuList[i].url.replace('/', '-'),
        meta: {
          menuId: menuList[i].menuId,
          title: menuList[i].name,
          isDynamic: true,
          isTab: true,
          iframeUrl: ''
        }
      }
      // url以http[s]://开头, 通过iframe展示
      if (isURL(menuList[i].url)) {
        route.path = `i-${menuList[i].menuId}`
        route.name = `i-${menuList[i].menuId}`
        route.meta.iframeUrl = menuList[i].url
      } else {
        try {
          route.component = _import(`modules/${menuList[i].url}`) || null
        } catch (e) {}
      }
      routes.push(route)
    }
  }
  if (temp.length >= 1) {
    fnAddDynamicMenuRoutes(temp, routes)
  } else {
    mainRoutes.name = 'main-dynamic'
    mainRoutes.children = routes
    router.addRoutes([
      mainRoutes,
      { path: '*', redirect: { name: '404' } }
    ])
    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
    console.log('\n')
    console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue')
    console.log(mainRoutes.children)
    console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue')
  }
}

export default router

Build a static server

ChuangWANG — Mon, 03 May 2021 07:13:53 +0000

the NPM package instruction page:
https://www.npmjs.com/package/live-server

npm install live-server
live-server --port=7890

then you open your browser, and input: localhost:7890