【vue】购物车案例+登录界面(实训1.7）

效果如下：
登录，若用户名和密码匹配不成功则无法进行跳转，若用户名和密码匹配成功，则跳转页面到购物车的页面。

登录成功过后跳转如下：

这部分是还没加入后端，是直接把用户名和密码写在里面。
用户名是：zqy ，密码为：123456

//Login.vue
<template>
	<div class="login-container">
		<div class="login-box">
			<!-- 头像区域 -->
			<div class="text-center avatar-box">
				<img src="./assets/login.jpg" class="img-thumbnail avatar" alt="" />
			</div>

			<!-- 表单区域 -->
			<div class="form-login p-4">
				<!-- 登录名称 -->
				<div class="form-group form-inline">
					<label for="username">登录名称</label>
					<!-- username双向绑定文本框 -->
					<input type="text" class="form-control ml-2" 
						id="username" placeholder="请输入登录名称" 
						autocomplete="off" 
						v-model.trim="username" />
				</div>
				<!-- 登录密码 -->
				<div class="form-group form-inline">
					<label for="password">登录密码</label>
					<!-- password双向绑定密码框 -->
					<input type="password" class="form-control ml-2" 
						id="password" placeholder="请输入登录密码" 
						v-model.trim="password" />
				</div>
				<!-- 登录和重置按钮 -->
				<div class="form-group form-inline d-flex justify-content-end">
					<button type="button" class="btn btn-secondary mr-2">重置</button>
					<button type="button" class="btn btn-primary" 
						@click="onLoginClick">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Login',
		data(){
			return {
				username:'',
				password:''
			}
		},
		methods:{
			// 登录方法
			onLoginClick(){
				console.log(this.username,this.password)
				if(this.username==="zqy" && this.password==="123456"){ // 正确的用户名和密码
					// 跳转到购物车页面
					this.$router.push('/cart')
				}
				else{
					this.username = ''
					this.password = ''
					alert('用户名或者密码错误！！')
				}
			},
		}
	}
</script>

<style lang="css" scoped="scoped">
	.login-container {
		background-color: #eee;
		height: 736px;
	}
	
	.login-container .login-box {
		width: 400px;
		height: 250px;
		background-color:  #35495e;
		border-radius: 3px;
		color:white;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
	}
	
	.login-container .login-box .form-login {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	.form-control {
		flex: 1;
	}
	
	.avatar-box {
		position: absolute;
		width: 100%;
		top: -65px;
		left: 0;
	}
	
	.avatar-box .avatar {
		width: 120px;
		height: 120px;
		border-radius: 50% !important;
		box-shadow: 0 0 6px #efefef;
	}
</style>

//router.vue
// 1.导入createRouter,createWebHashHistory两个函数
import {createRouter,createWebHashHistory} from 'vue-router'

// 2.导入组件
import Cart from './Cart.vue'
import Login from './Login.vue'

// 3 创建路由对象
const router = createRouter(
	{
		history: createWebHashHistory(),  // 固定写法
		// 定义路由地址
		routes: [
			{
				// 地址是"/",重定向到地址"/login"
				path:'/',
				redirect: '/login',
			},
			{
				// 地址为/login,展示Login
				path: '/login',
				component: Login 
			},
			{
				// 地址为/cart，展示Cart
				path: '/cart',
				component: Cart,
			},
		],
	}
	
)

// 4. 向外共享路由示例对象
export default router

//Cart.vue
<template>

	<!-- 使用 es-header 组件 -->
	<es-header title="京东购物"></es-header>

	<!-- 使用 goods 组件 -->
	<es-goods v-for="item in goodslist" :key="item.id" 
		:id="item.id" 
		:title="item.goods_name" 
		:thumb="item.goods_img" 
		:price="item.goods_price" 
		:count="item.goods_count" 
		:checked="item.goods_state" 
		@stateChange="onGoodsStateChange"
		@countChange="onGoodsCountChange"></es-goods>

	<!-- 使用 es-footer 组件 -->
	<es-footer @fullChange="onFullStateChange" :total="total" :amount="amount"></es-footer>
</template>

<script>
	// 导入 header 组件
	import EsHeader from './components/es-header/EsHeader.vue'
	// 导入 footer 组件
	import EsFooter from './components/es-footer/EsFooter.vue'
	// 导入 goods 组件
	import EsGoods from './components/es-goods/EsGoods.vue'

	export default {
		name: 'Cart',
		components: {
			// 注册组件
			EsHeader,
			EsFooter,
			EsGoods,
		},
		data() {
			return {
				// 商品列表
				goodslist: [],
			}
		},
		created() {
			this.getGoodsList()
		},
		computed: {
			// 总金额
			amount() {
				let a = 0
				// 遍历商品数组
				this.goodslist.forEach(function(e) {
					if(e.goods_state == true) {
						a += e.goods_price * e.goods_count
					}
				})
				return a
			},
			// 已勾选商品的总数量
			total(){
				let t = 0
				this.goodslist.forEach(function(e){
					if(e.goods_state==true){
						t += e.goods_count
					}
				})
				return t
			},
		},
		methods: {
			// 获得商品列表
			getGoodsList() {
				var api = '/api/cart'
				// this对象赋值给a
				var a = this
				axios.get(api).then(function(response) {
					//console.log(response)
					if(response.status != 200) {
						return alert('获取商品列表失败')
					}
					a.goodslist = response.data.list
				})
			},
			// 获得复选框的选中状态
			onFullStateChange(isFull) {
				//console.log(isFull)
				this.goodslist.forEach(function(e){
					e.goods_state=isFull
				})
			},
			// 商品状态发生变化执行
			onGoodsStateChange(e) {
				//console.log(e)
				// find表示查找满足条件的第一个元素
				const goods = this.goodslist.find(function(x) {
					return x.id === e.id
				})
				//console.log(goods)
				if(goods) {
					goods.goods_state = e.value
				}
			},
			// 商品数量发生变化执行
			onGoodsCountChange(e){
				// console.log(e)
				const goods = this.goodslist.find( function(x){
					return x.id === e.id
				})
				
				if(goods){
					goods.goods_count = e.value
				}
			}
		}
	}
</script>

//App.vue
<template>
	<!-- 路由的占位符 -->
	<router-view></router-view>
</template>

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

<style lang="css" scoped="scoped">
</style>

//main.js
import { createApp } from 'vue'

import App from './App.vue'

// 路由步骤1.导入路由模块
import router from './router.js'

// 先引入bootstrap
import './assets/css/bootstrap.css'
import './index.css'

const spa_app = createApp(App)

// 指定axios根路径
axios.defaults.baseURL = "https://www.escook.cn"

// 路由步骤2.挂载路由对象
spa_app.use(router)

spa_app.mount('#app')