vue小项目

最新推荐文章于 2024-05-11 11:57:58 发布

tang05709

最新推荐文章于 2024-05-11 11:57:58 发布

阅读量190

点赞数

分类专栏： js 网站相关的其他文章

本文链接：https://blog.csdn.net/tang05709/article/details/103486507

版权

js 同时被 2 个专栏收录

109 篇文章 0 订阅

订阅专栏

网站相关的其他文章

83 篇文章 0 订阅

订阅专栏

首先需要安装node，参考官网http://nodejs.cn/

再就是安装vue-cli

npm install vue-cli -g
or
npm install -g @vue/cli

初始化项目

vue init webpack staticweb

安装vue-router

npm install vue-router

安装axios

npm install axios

项目是输入手机号查证书，就2个页面，首页和查询结果页面，静态页面之前已经做好，直接把images，css放在static下

1，main.js可以不动，把页面公共部分放App.vue里面，如

<template>
  <div id="app">
    <header class="header">
      <div class="logo"><img src="static/images/image3x.png" alt="荣誉证书查询" /></div>
    </header>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

首页

<!DOCTYPE html>
<html>
  <head>
      <meta charset=utf-8>
      <meta http-equiv=X-UA-Compatible content="IE=edge">
      <link href="images/favicon.ico" rel="icon" type="image/x-ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
      <title>证书查询</title>
      <link href="static/css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2. 在router的index.js里面加入router、axios、以及2个页面的component

import Vue from 'vue'
import axios from 'axios'
import Router from 'vue-router'
import Home from '@/components/Home'
import Result from '@/components/Result'

Vue.use(Router)
Vue.prototype.$axios = axios

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/result',
      name: 'Result',
      component: Result
    }
  ]
})

3.首页Home.vue输入手机号

<template>
  <div class="main-view">
    <section class="main">
      <div class="content">
        <p>亲爱的学员：</p>
        <p class="detail">
          XXXXXXXXXXXXXXXXXXXXXXXX。
        </p>
      </div>
    </section>
    <section class="line clearfix">
      <div class="f-l line1"></div>
      <div class="f-l line2"></div>
      <div class="f-r line1"></div>
    </section>
    <section class="select-form">
        <div class="phone clearfix">
          <div class="f-l text-input"><input v-model="phone" type="text" name="phone" id="phone" value="" placeholder="请输入手机号" /></div>
          <div class="f-r close" @click="clearForm"><img src="static/images/hclose.png" alt="关闭" /></div>
        </div>
        <div class="form-submit">
          <button @click="getResult">立即查询</button>
        </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      phone: ''
    }
  },
  methods: {
    getResult () {
      var phone = this.phone
      if (phone === '') {
        alert('请输入手机号')
        return false
      }
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!reg.test(phone)) {
        alert('手机号码有误')
        return false
      }
      this.$router.push({name: 'Result', params: { phone: this.phone }})
    },
    clearForm () {
      this.phone = ''
    }
  }
}
</script>

this.$router.push({name: 'Result', params: { phone: this.phone }})

表示隐藏参数，如果需要显示，可以替换params为query

<template>
  <div class="main-view">
    <section class="main">
      <div class="content">
        <p class="detail" id="detail" v-html="content"></p>
      </div>
    </section>
    <section class="line clearfix">
      <div class="f-l line1"></div>
      <div class="f-l line2"></div>
      <div class="f-r line1"></div>
    </section>
    <section class="result" id="result">
      <div class="success" v-html="imgurl"><img src="static/images/loading.gif" width="200" /></div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Result',
  data () {
    return {
      content: '',
      imgurl: ''
    }
  },
  mounted () {
    this.getResult()
  },
  methods: {
    getResult () {
      var phone = this.$route.params.phone
      this.$axios.get('static/certificate/' + phone + '.jpg', {
        responseType: 'arraybuffer'
      }).then(response => {
        return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.imgurl = '<img src="' + data + '" />'
        this.content = 'xxxxxxxxxxxxxxxxxxxx！）'
      }).catch(error => {
        console.log(error)
        this.imgurl = 'xxxxxxxxxxxxxxxxxxx'
        this.content = 'xxxxxxxxxxxxxxxxxxxxx'
      })
    }
  }
}
</script>