Project construction:

1. The front end uses the Vue cli framework to realize page display

2. Middleware web service uses C ා to realize the connection between front-end and back-end database

3. Use stored procedures to put all businesses here,

Project practice

I. environment configuration

1. Install Vue cli globally and use it all the time

npm install -g @vue/cli

2. Creation process

View vue version

Create project Vue init webpack hxc person

Enter project directory

Initialize the installation package npm install

Install Mint UI NPM install Mint UI - S

Install axios npm install -s axios

Because jQuery components are used, jQuery is introduced

npm install -s jquery@2.1.1

To configure

webpack.base.conf.js file

  //Other code
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // webpack uses jQuery, if it is downloaded by itself
      // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
      // If you use jQuery installed by NPM
      'jquery': 'jquery'
    }
  },
  // Add a plugin
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],
  //Other code

Note: after modifying the configuration file, npm run dev should be restarted

Detailed introduction

http://618cj.com/2016/08/24/vue-cli%E6%80%8E%E4%B9%88%E5%BC%95%E5%85%A5jquery/

When I met the first pit, I introduced the sliding component written by jquery. As a result, I set the background picture in the component to not display or report an error. After several hours, I figured out a stupid solution. Because the setting in the imported js is invalid, it can only be reset in the mounted method.

mounted: function() {
    this.$nextTick(function(ischeck) {
      var res = hd();

      const bgimg = document.getElementById("mpanel4");
      // console.log(bgimg.getElementsByTagName("div"));
      // console.log(bgimg.getElementsByTagName("div")[1].style.backgroundImage);
      // var imgsrc = bgimg.getElementsByTagName("div")[1].style.backgroundImage;
      // // imgsrc = imgsrc.replace('url("', "");
      // // imgsrc = imgsrc.replace('")', "");
      // //console.log(imgsrc); / / error in splicing img path, unable to parse

      if (Math.ceil(Math.random() * 10) < 5) {
        bgimg.getElementsByTagName("div")[1].style.backgroundImage = "url(" + require("@/assets/verify/images/1.jpg") + ")"; //Set up a larger picture
        bgimg.getElementsByTagName("div")[7].style.backgroundImage = "url(" + require("@/assets/verify/images/1.jpg") + ")"; //Set up a larger picture
      } else {
        bgimg.getElementsByTagName("div")[1].style.backgroundImage = "url(" + require("@/assets/verify/images/2.jpg") + ")"; //Set up a larger picture
        bgimg.getElementsByTagName("div")[7].style.backgroundImage = "url(" + require("@/assets/verify/images/2.jpg") + ")"; //Set up a larger picture
      }
    });
    // This is just dom
    // console.log('validation result = '+ res);
    // console.log(this.ischeck.isok);
    // this.$set(this.ischeck, 'isok', '1')
  }

The second pit we met took an afternoon to finish. Because the event will not be bound on the dynamically added dom, you can only use js to simulate the binding event in the end.

function clickMe(tv)
{
        var o=document.getElementById("mycheck");
        o.focus();
        o.value=tv;//After the automatic assignment, the text box has changed, and the onchange event will occur in theory
        //But the onchange event will not be triggered without the following sentence
        if ("createEvent" in document) {
				var evt = document.createEvent("HTMLEvents");
			 	evt.initEvent("change", false, true);
			 	o.dispatchEvent(evt);
			} else {
			 	o.fireEvent("onchange");
      }
}

This will trigger the event.

<div><input id="mycheck" type="text" value="0" v-on:change="myLogin" /></div>