实习任务一：Vue Nodejs MySQL 登录注册 + 首页展示轮播图，热门商品

前端小白实习项目，仅供参考

相关参考：vue登陆注册

登录页面：

通过axios的post方法连接后端，进行select数据库表单内数据

具体代码：

 注册页面：

 post方法连接后端register.js，将表单中绑定的数据传输过去，register.js中主要功能是查询数据库表中数据是否重复，不重复则进行插入insert这条数据。

具体代码：

Home页：

图片获取是通过后端将图片的相对路径传到前端（图片存在后端中），前端将路径进行拼接然后渲染。我创了一个单独的数据库表去存图片路径，再通过后端传入前端。有尝试过传图片流，但是没成功。

 具体代码：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.HOST = 'http://localhost:8080'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''

})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import register from '@/components/register'
import home from '@/components/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'denglu',
      component: login
    },
    {
      path: '/register',
      name: 'zhuce',
      component: register
    },
    {
      path: '/home',
      name: 'home',
      component: home
    }
  ]
})