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

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

相关参考：vue登陆注册

登录页面：

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

具体代码：

1.  
    
2.  
   <template>
3.  
   <div id="login" class="box">
4.  
   <h3>登录页面</h3>
5.  
   <el-form ref="loginForm" :rules="rules" :model="loginForm" label-width="20%">
6.  
   <el-form-item label="用户名:" prop="username">
7.  
   <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
8.  
   </el-form-item>
9.  
   <el-form-item prop="password" label="密 码:">
10.  
    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
11.  
    </el-form-item>
12.  
    </el-form>
13.  
    <el-button type="primary" round @click="submitForm('loginForm')" class="btn">登录</el-button>
14.  
    <router-link to="/register">用户注册</router-link>
15.  
    </div>
16.  
    </template>
17.  
     
18.  
    <script>
19.  
    /* eslint-disable */
20.  
    import axios from "axios";
21.  
    export default {
22.  
    data() {
23.  
    return {
24.  
    loginForm: {
25.  
    username: "",
26.  
    password: "",
27.  
    },
28.  
    rules: {
29.  
    username: [
30.  
    { required: true, message: "用户名不能为空", trigger: "blur" },
31.  
    { min: 3, max: 10, message: "用户名长度需在3-10", trigger: "blur" },
32.  
    ],
33.  
    password: [
34.  
    { required: true, message: "密码不能为空", trigger: "blur" },
35.  
    { min: 3, max: 10, message: "密码长度需在3-10", trigger: "blur" },
36.  
    ],
37.  
    },
38.  
    };
39.  
    },
40.  
     
41.  
    methods: {
42.  
    submitForm(formName) {
43.  
    this.$refs[formName].validate((valid) => {
44.  
    if (valid) {
45.  
    this.$axios
46.  
    .post("http://127.0.0.1/login", {
47.  
    params: {
48.  
    // 传递参数
49.  
    name: this.loginForm.username,
50.  
    password: this.loginForm.password,
51.  
    },
52.  
    })
53.  
    .then((res) => {
54.  
    if (res.data.length) {
55.  
    console.log(res.data);
56.  
    this.$alert("登录成功"); // 获取返回数组长度，判断数据库中是否有对应用户名和密码，用于判断是否登录成功
57.  
    this.$router.push({
58.  
    path: "/home" // 登录成功，路由跳转至/home页面（提前写好home页面），并携带用户名
59.  
    });
60.  
    } else {
61.  
    this.$alert("用户名或密码错误", "登录失败", {
62.  
    // 登录失败，出现提示框，并清空输入框
63.  
    confirmButtonText: "确定",
64.  
    callback: (action) => {
65.  
    (this.loginForm.username = ""),
66.  
    (this.loginForm.password = "");
67.  
    },
68.  
    });
69.  
    }
70.  
    })
71.  
    .catch((error) => {
72.  
    console.log("登录失败" err);
73.  
    });
74.  
    }
75.  
    });
76.  
    },
77.  
    },
78.  
    };
79.  
    </script>
80.  
    <style>
81.  
    .box {
82.  
    width: 500px;
83.  
    height: 400px;
84.  
    margin: 100px auto;
85.  
    padding: 20px;
86.  
    border: 1px solid;
87.  
    border-radius: 8px;
88.  
    box-shadow: 0 0 5px;
89.  
    }
90.  
    h3 {
91.  
    text-align: center;
92.  
    }
93.  
    .el-input {
94.  
    width: 92%;
95.  
    }
96.  
    .btn {
97.  
    text-align: center;
98.  
    }
99.  
    </style>

 注册页面：

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

具体代码：

1.  
   <template>
2.  
   <div>
3.  
   <div id="register" class="box" >
4.  
   <h3>注册页面</h3>
5.  
   <el-form ref="registerForm" :rules="rules" :model="loginForm" label-width="20%">
6.  
   <el-form-item label="用户名:" prop="username">
7.  
   <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
8.  
   </el-form-item>
9.  
   <el-form-item prop="password" label="密 码:">
10.  
    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
11.  
    </el-form-item>
12.  
    <el-form-item prop="password2" label="确认密码:">
13.  
    <el-input v-model="loginForm.password2" type="password" placeholder="请再次输入密码"></el-input>
14.  
    </el-form-item>
15.  
    </el-form>
16.  
    <el-button type="primary" round @click="submitForm('registerForm')" class="btn">注册</el-button>
17.  
    <router-link to="/">返回登录</router-link>
18.  
    </div>
19.  
    </div>
20.  
    </template>
21.  
     
22.  
    <script>
23.  
    /* eslint-disable */
24.  
    import axios from 'axios'
25.  
    export default {
26.  
    data () {
27.  
    var validatePass = (rule, value, callback) => {
28.  
    if (value === '') {
29.  
    callback(new Error('请再次输入密码'))
30.  
    } else if (value !== this.loginForm.password) {
31.  
    callback(new Error('两次输入密码不一致!'))
32.  
    } else {
33.  
    callback()
34.  
    }
35.  
    }
36.  
    return {
37.  
    loginForm: {
38.  
    username: '',
39.  
    password: '',
40.  
    password2: ''
41.  
    },
42.  
    rules: {
43.  
    username: [
44.  
    { required: true, message: '用户名不能为空', trigger: 'blur'},
45.  
    {min: 3, max: 10, message: '用户名长度需在3-10', trigger: 'blur'}
46.  
    ],
47.  
    password: [
48.  
    { required: true, message: '密码不能为空', trigger: 'blur'},
49.  
    {min: 3, max: 10, message: '密码长度需在3-10', trigger: 'blur'}
50.  
    ],
51.  
    password2: [
52.  
    { required: true, message: '密码不能为空', trigger: 'blur'},
53.  
    {min: 3, max: 10, message: '密码长度需在3-10', trigger: 'blur'},
54.  
    { validator: validatePass, trigger: 'blur' }
55.  
    ]
56.  
    }
57.  
    }
58.  
    },
59.  
     
60.  
    methods: {
61.  
    submitForm (formName) {
62.  
    this.$refs[formName].validate((valid) => {
63.  
    if (valid) {
64.  
    this.$axios
65.  
    .post('http://127.0.0.1/register', {
66.  
    name: this.loginForm.username,
67.  
    password: this.loginForm.password
68.  
    })
69.  
    .then(res => {
70.  
    if (res.data == 2) {
71.  
    console.log(res.data)
72.  
    this.$alert('注册成功')
73.  
    } else {
74.  
    console.log(res.data)
75.  
    this.$alert('用户名重复', '注册失败', {
76.  
    confirmButtonText: '确定',
77.  
    callback: action => {
78.  
    this.loginForm.username = '',
79.  
    this.loginForm.password = '',
80.  
    this.loginForm.password2 = ''
81.  
    }
82.  
    })
83.  
    }
84.  
    })
85.  
    }
86.  
    })
87.  
    }
88.  
    }
89.  
    }
90.  
    </script>
91.  
     
92.  
    <style>
93.  
    .box{
94.  
    width:500px;
95.  
    height:400px;
96.  
    margin:100px auto;
97.  
    padding:20px;
98.  
    border:1px solid;
99.  
    border-radius:8px;
100.  
     box-shadow:0 0 5px;
101.  
     }
102.  
     h3{
103.  
     text-align: center;
104.  
     }
105.  
     .el-input{
106.  
     width:92%;
107.  
     }
108.  
     .btn{
109.  
     text-align: center;
110.  
     }
111.  
     </style>

Home页：

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

 具体代码：

1.  
   <template>
2.  
   <div class="goods">
3.  
   <el-breadcrumb separator="/">
4.  
   <el-breadcrumb-item :to="{ path: '/' }">返回登录</el-breadcrumb-item>
5.  
   <el-breadcrumb-item :to="{ path: '/register' }">返回注册</el-breadcrumb-item>
6.  
   </el-breadcrumb>
7.  
   <!-- 面包屑END -->
8.  
   <el-carousel :interval="4000" type="card">
9.  
   <el-carousel-item v-for="item in pictureList" :key="item.src">
10.  
    <img class="pic" :src="item.src" alt="图片丢失了"/>
11.  
    </el-carousel-item>
12.  
    </el-carousel>
13.  
    <!-- 轮播图END -->
14.  
    <div class="list">
15.  
    <h3>推荐商品列表</h3>
16.  
    <!-- 商品 -->
17.  
    <el-row :gutter="20" type="flex" justify="space-around">
18.  
    <el-col :span="10" :offset="1" v-for="item in pictureList" :key="item.src">
19.  
    <div class="picBox">
20.  
    <img class="listPic" :src="item.src"/>
21.  
    </div>
22.  
    </el-col>
23.  
    </el-row>
24.  
    <!-- 图片栏END -->
25.  
    <el-row :gutter="20" type="flex" justify="space-around">
26.  
    <div v-for="item in goodList" :key="item.name">
27.  
    <el-col :span="50" :offset="2">
28.  
    <div class="infoBox">
29.  
    <span>商品名:{{item.name}}</span><br>
30.  
    <span>价格:{{item.price}} 元</span><br>
31.  
    <span>销量:{{item.sales}}</span>
32.  
    </div>
33.  
    </el-col>
34.  
    </div>
35.  
    </el-row>
36.  
    <!-- 信息栏END -->
37.  
    </div>
38.  
    <!-- 商品END -->
39.  
    </div>
40.  
    </template>
41.  
     
42.  
    <script>
43.  
    export default {
44.  
    components: {},
45.  
    data () {
46.  
    return {
47.  
    goodList: [],
48.  
    pictureList: []
49.  
    }
50.  
    },
51.  
    created () {},
52.  
    mounted () {
53.  
    this.getList()
54.  
    this.getpicList()
55.  
    this.timedRefresh()
56.  
    },
57.  
    computed: {},
58.  
    beforeDestroy () {
59.  
    clearInterval(this.timer) // 清楚定时刷新，不清除会一直运行，关闭页面也会定时刷新
60.  
    },
61.  
    methods: {
62.  
    timedRefresh () {
63.  
    clearInterval(this.timer)
64.  
    this.timer = setInterval(() => {
65.  
    window.location.reload() // 每隔6s刷新整个页面
66.  
    }, 6000)
67.  
    },
68.  
    getpicList () {
69.  
    this.$axios
70.  
    .get('http://127.0.0.1/picture') // {responseType: 'blob'}
71.  
    .then((res) => {
72.  
    res.data = res.data.map((item) => {
73.  
    item.src = 'http://127.0.0.1/' item.src
74.  
    return item
75.  
    })
76.  
    console.log(res.data)
77.  
    this.pictureList = res.data
78.  
    console.log('图片' res.data)
79.  
    console.log(this.pictureList)
80.  
    })
81.  
    },
82.  
    getList () {
83.  
    this.$axios
84.  
    .get('http://127.0.0.1/goods', {
85.  
     
86.  
    }).then((res) => {
87.  
    if (res.data.length) { // 判断是否有意义
88.  
    console.log(res.data)
89.  
    this.goodList = res.data
90.  
    // console.log('数据传输成功')
91.  
    } else {
92.  
    // console.log('数据传输失败')
93.  
    }
94.  
    })
95.  
    }
96.  
    }
97.  
    }
98.  
    </script>
99.  
     
100.  
     <style>
101.  
     .goods {
102.  
     margin-top: -30px;
103.  
     }
104.  
     .goods .pic {
105.  
     height:300px;
106.  
     width:400px;
107.  
     }
108.  
     .goods .el-breadcrumb {
109.  
     margin-top: 5px
110.  
     }
111.  
     .goods .el-carousel{
112.  
     height: 300px;
113.  
     }
114.  
     .goods .el-carousel__item{
115.  
     background-color:floralwhite;
116.  
     }
117.  
     .goods .list {
118.  
     margin-top: 50px;
119.  
     }
120.  
     .goods .list .listPic {
121.  
     height:200px;
122.  
     width:200px;
123.  
     }
124.  
     .goods .list .picBox{
125.  
     background-color: blue;
126.  
     margin-top: 20px;
127.  
     margin-left: 150px;
128.  
     height:200px;
129.  
     width:200px;
130.  
     }
131.  
     .goods .list .infoBox{
132.  
     background-color:white;
133.  
     border-radius: 4px;
134.  
     height:100px;
135.  
     width:200px;
136.  
     text-align:left;
137.  
     }
138.  
     .goods .el-row{
139.  
     background-color:bisque;
140.  
     height: 200px;
141.  
     }
142.  
     .goods .el-col{
143.  
     background-color:bisque;
144.  
     }
145.  
     </style>

main.js

1.  
   import Vue from 'vue'
2.  
   import App from './App'
3.  
   import router from './router'
4.  
   import axios from 'axios'
5.  
   import ElementUI from 'element-ui'
6.  
   import 'element-ui/lib/theme-chalk/index.css'
7.  
    
8.  
   Vue.prototype.HOST = 'http://localhost:8080'
9.  
   Vue.config.productionTip = false
10.  
    Vue.prototype.$axios = axios
11.  
    Vue.use(ElementUI)
12.  
     
13.  
    /* eslint-disable no-new */
14.  
    new Vue({
15.  
    el: '#app',
16.  
    router,
17.  
    components: { App },
18.  
    template: '<App/>'
19.  
     
20.  
    })

router/index.js

1.  
   import Vue from 'vue'
2.  
   import Router from 'vue-router'
3.  
   import login from '@/components/login'
4.  
   import register from '@/components/register'
5.  
   import home from '@/components/home'
6.  
    
7.  
   Vue.use(Router)
8.  
    
9.  
   export default new Router({
10.  
    routes: [
11.  
    {
12.  
    path: '/',
13.  
    name: 'denglu',
14.  
    component: login
15.  
    },
16.  
    {
17.  
    path: '/register',
18.  
    name: 'zhuce',
19.  
    component: register
20.  
    },
21.  
    {
22.  
    path: '/home',
23.  
    name: 'home',
24.  
    component: home
25.  
    }
26.  
    ]
27.  
    })

这篇好文章是转载于：学新通技术网