<?php header("Access-Control-Allow-Origin: *"); error_reporting(0); $user = "cj"; $password = "cj123456"; $db = "bysj"; $host = "localhost"; $port = 3306; $link = mysqli_init(); $con = mysqli_connect($host, $user, $password, $db, $port); mysqli_set_charset($con, "utf8"); if(mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error(); $username = $_POST["username"]; $pwd = $_POST["pwd"]; $sql = "select count(*) as total from userdata where username= "". $username ."" and pwd = "". $pwd ."""; $result = mysqli_query($con, $sql); if($result){
$resultArray = array(); // 初始化一个数组
while($row = mysqli_fetch_object($result)) {
array_push($resultArray,$row);
} } $newArray = json_encode($resultArray);
// var_dump($newArray); if($newArray[11] > 0){
echo "true";
}else{
echo "flase";
}
mysqli_close($con); ?> <template>
<div id="index">
<div id="swiper">
<el-carousel trigger="click" class="swiper">
<el-carousel-item v-for="(item,index) in swiperData" :key="index">
<img :src="item.img" alt />
<div class="text">
<h2 style="color:#fff">{{item.title}}</h2>
<p>{{item.description}}</p>
<h3 style="color:red">￥{{item.price}}元</h3>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="bigImg">
<el-card shadow="never">
<div v-for="(item,index) in bigDate" :key="index">
<img :src="item.img" class="image" />
<div class="text">
<h2 style="color:#fff">{{item.title}}</h2>
<p>{{item.description}}</p>
<h3 style="color:red">￥{{item.price}}元</h3>
</div>
</div>
</el-card>
</div>
<div class="smallImg">
<el-card v-for="(item,index) in smallImg" :key="index" class="smallImgItem">
<img :src="item.img" class="smallSize" />
<div class="text">
<h3 class="title">{{item.title}}</h3>
<p>{{item.description}}</p>
<h3 class="money">￥{{item.price}}元</h3>
<el-button type="primary" class="btn">查看详情</el-button>
</div>
</el-card>
</div>
</div> </template> <script> export default {
name: "index",
data() {
return {
swiperData: [
],
smallImg: [
],
bigDate: [
]
};
},
mounted() {
console.log(this.$store.state.currentUser)
}, }; </script> <style lang="scss" scope="this api replaced by slot-scope in 2.5.0+"> #index {
margin-top: 3rem;
text-align: center; } .el-card__body {
padding: 0;
} .swiper {
width: 100%;
height: 25rem;
.el-carousel__container {
height: 25rem;
}
img {
min-height: 768px;
min-width: 1366px;
}
.text{
text-align: left;
box-sizing: border-box;
height: 10rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-20%, -100%);
h2 {
height: 3rem;
line-height: 3rem;
}
p {
height: 6rem;
line-height: 2rem;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
} } .bigImg {
margin-top: 2rem;
font-size: 16px;
position: relative;
margin-left: 0.2rem;
.el-card {
border-style: none;
}
.image {
width: 1280px;
height: 600px;
}
.text {
text-align: left;
box-sizing: border-box;
height: 10rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-20%, -100%);
h2 {
height: 3rem;
line-height: 3rem;
}
p {
height: 6rem;
line-height: 2rem;
color: #ffffff;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
} } .smallImg {
// margin-top: 2rem;
text-align: left;
// margin-left: -1.8rem;
margin: 2rem auto;
.smallImgItem {
font-size: 16px;
width: 20rem;
height: 24rem;
float: left;
margin-left: 1.9rem;
.smallSize {
width: 20rem;
}
.text {
padding: 1rem;
.title{
height: 2rem;
}
p {
height: 6rem;
line-height: 2rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.money{
height: 3rem;
line-height: 3rem;
color: red;
float: left;
}
.btn{
float: right;
margin-top: 0.5rem;
}
}
} } </style> <template>
<div id="login">
<p class="title">用户登录</p>
<div class="login">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户昵称" prop="username">
<el-input v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="用户密码" prop="pwd">
<el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-radio v-model="radio" label="1">记住账号密码</el-radio>
<el-link href="/registered">没有账号，点击注册</el-link>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm("ruleForm")" class="btn">登录</el-button>
<el-button @click="resetForm("ruleForm")" class="btn" style="margin-left:6rem">重置</el-button>
</el-form-item>
</el-form>
</div>
</div> </template> <script> import Qs from "qs"; export default {
name: "login",
data() {
var checkPwd = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
console.log(this.ruleForm);
} else {
if (this.ruleForm.pwd.length < 6) {
callback(new Error("密码长度应大于 6 位数"));
}
callback();
}
};
return {
radio: "1",
name: "橘子 orange",
ruleForm: {
username: "",
pwd: ""
},
rules: {
username: [
{ required: true, message: "请输入用户昵称", trigger: "blur" }
],
pwd: [{ required: true, validator: checkPwd, trigger: "blur" }]
}
};
},
methods: {
toindex() {
this.$router.push({
path: "/"
});
location.reload();
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
let data = {
username: this.ruleForm.username,
pwd: this.ruleForm.pwd
};
if (valid) {
this.$axios({
url: "/php/login.php",
method: "post",
data: Qs.stringify(data)
})
.then(res => {
console.log(res);
if (res.data == true) {
this.$message({
showClose: true,
message: `欢迎${this.ruleForm.username}成功登录！`,
type: "success"
});
localStorage.setItem("username", this.ruleForm.username);
this.$store.commit("userStatus", this.ruleForm.username);
setTimeout(this.toindex, 3000);
} else {
this.$message({
showClose: true,
message: `用户昵称或者密码输入错误！`,
type: "error"
});
console.log("登录失败");
}
})
.catch(error => {
console.log(error);
});
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
} }; </script> <style lang="scss" scope="this api replaced by slot-scope in 2.5.0+"> #login {
margin-top: 6rem;
.title {
font-size: 30px;
text-align: center;
} } .el-message {
margin-top: 3rem; } .login {
width: 25rem;
min-height: 18rem;
margin: auto;
margin-top: 2rem;
.el-input {
.el-input__inner {
width: 20rem !important;
}
}
.btn {
width: 7rem;
}
.el-link {
height: 1rem;
float: right;
margin: 0.5rem 0.5rem 0 0;
} } </style> <template>
<div id="header">
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1" @click="toIndex">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">生鲜水果</template>
<el-menu-item index="2-1">
<span @click="toGoods" class="childitem">苹果</span>
</el-menu-item>
<el-menu-item index="2-2">
<span class="childitem" @click="toGoods">梨子</span>
</el-menu-item>
<el-menu-item index="2-3">
<span @click="toGoods" class="childitem">香蕉</span>
</el-menu-item>
</el-submenu>
<el-menu-item index="3">
<span @click="toGoods">手工艺品</span>
</el-menu-item>
<el-menu-item index="4">
<span @click="toGoods">旅行景点</span>
</el-menu-item>
<el-menu-item index="5">分享中心</el-menu-item>
</el-menu>
</div> </template> <script> export default {
name: "El-header",
data() {
return {
activeIndex: "1"
// goodsStr: ""
};
},
methods: {
toIndex() {
this.$router.push({
path: "/"
});
},
toGoods(e) {
const text = e.target.innerText;
localStorage.setItem("goodsName",text)
this.$store.state.goodsStr = text;
console.log(this.$store.state.goodsStr);
this.$router.push({
path: "goods" + this.$store.state.goodsStr
});
}
} }; </script> <style lang="scss" scope="this api replaced by slot-scope in 2.5.0+"> #header {
float: left; }
.childitem {
display: block;
width: 9rem !important;
cursor: pointer; } </style> <template>
<div id="footer">@2019 橘子 orange</div> </template> <script> export default {
name: "El-footer",
data() {
return {};
} }; </script> <style lang="scss" scope="this api replaced by slot-scope in 2.5.0+"> #footer {
height: 3rem;
background-color: #d6d5d5;
line-height: 3rem;
margin-top: 2rem;...
相关热词搜索： 源码 著作权 软件