从0开始教你三天完成毕业设计-前端之首页

Black Jun

已于 2022-11-29 19:49:52 修改

阅读量1.1k

点赞数 2

分类专栏：从0开始,三天制作完成毕设 element-ui html 文章标签：前端 vue.js javascript

于 2022-11-29 18:44:21 首次发布

本文链接： https://blog.csdn.net/BlackjunPJH/article/details/128098608

版权

从0开始,三天制作完成毕设同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

element-ui

3 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

前言

我这里主要用到了vue+element-ui,大概有不懂的,可以看下面两篇文章深入学习一下

vue

Vue学习之从入门到神经(两万字收藏篇)_白大锅的博客-CSDN博客_vue学习之从入门到神经Vue史诗级教程系列文章，欢迎订阅专栏https://blog.csdn.net/weixin_45735355/article/details/118931768?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166968252716782429794415%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166968252716782429794415&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-118931768-null-null.142%5Ev67%5Econtrol,201%5Ev3%5Econtrol_2,213%5Ev2%5Et3_control2&utm_term=vue&spm=1018.2226.3001.4187

element

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/installation

element里面的话里面有很多一个封装好以及十分美观的组件,大家只需要引入进来就可以,和我一样页面一样美观大气

登录/注册

我的登录注册用到了用的是一个界面多用,模板的话是element-ui的el-form,el-form-item,el-input,用的v-if进行监听修改前端展示的是登录或者注册界面

核心代码

<template>
  <div>
    <div style="width:100%;overflow: hidden;background-color: black;" :style="fullHeight">
      <img style="width:100%;" src="@/assets/images/login_background.jpg" alt="背景图片"/>
      <div class="submit" :style="loginStyle" v-if="isLogin" style="  height: 450px;left: -36%">
        <div style="margin-top: 10px;text-align: center">
          <img src="static/logo.svg" alt="头像" style="width:100px;margin-bottom:8px;">
          <div>
            <el-form ref="form" label-position='top'>
              <el-form-item>
                <div style="font-size: 16px;font-weight: bold">用户名</div>
                <el-input style="width:320px" v-model="user.userName"></el-input>
              </el-form-item>
              <el-form-item>
                <div style="font-size: 16px;font-weight: bold">密码</div>
                <el-input style="width:320px" show-password v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-radio v-model="role" label="user"><strong>用户</strong></el-radio>
                <el-radio v-model="role" label="admin"><strong>管理员</strong></el-radio>
              </el-form-item>
            </el-form>
            <div style="text-align: left;position:relative;left: 85px">
              <el-button type="success" @click="login()">登录</el-button>
              <el-button @click="isLogin=false">注册</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="submit" :style="loginStyle" v-else style="  height: 490px;text-align: center;left: 36%">
        <div style="margin-top: 10px;">
          <img src="static/logo.svg" alt="头像" style="width:100px;margin-bottom:8px;">
        </div>
        <el-form ref="form" label-position='top'>
          <el-form-item>
            <div style="font-size: 16px;font-weight: bold">用户名</div>
            <el-input style="width:320px" v-model="registers.userName"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="font-size: 16px;font-weight: bold">密码</div>
            <el-input style="width:320px" show-password v-model="registers.password1"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="font-size: 16px;font-weight: bold">重新输入密码</div>
            <el-input style="width:320px" show-password v-model="registers.password2"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: left;position:relative;left: 85px">
          <el-button type="success" @click="registerUser()">注册</el-button>
          <el-button @click="isLogin=true">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {net_login, net_register} from "../net/before/mine";

export default {
  name: "login",
  data() {
    return {
      fullHeight: '',
      isLogin: true,
      role: "user",
      user: {
        userName: '',
        password: ''
      },
      loginStyle: '',
      registers: {
        userName: '',
        password1: '',
        password2: ''
      }
    }
  },
  methods: {
    //用户登录
    async login() {
      let res = {
        code: "500",
        message: ""
      }
      if (this.user.userName === '') {
        res.message = "用户名为空"
      } else if (this.user.password === '') {
        res.message = "密码为空"
      }
      if (res.message === "") {
        let uploadUser = {
          userName: this.user.userName,
          password: this.user.password
        }
        let res = await net_login(uploadUser);
        if (res.code === "200") {
          if (this.role === "admin") {
            if (res.data.role !== "admin") {
              res = {
                code: "500",
                message: "用户权限不够!"
              }
            } else {
              sessionStorage.setItem("id", res.data.userId);
              sessionStorage.setItem("user", res.data.userName);
              await this.$router.push("/back_home/user");
            }
          } else {
            sessionStorage.setItem("id", res.data.userId);
            await this.$router.push("/home/mine");
          }
        }
        this.$store.commit("tip", res);
        this.user = {
          userName: '',
          password: ''
        }
        this.role = "user";
      } else {
        this.$store.commit("tip", res);
      }
    },
    //用户注册
    async registerUser() {
      let res = {
        code: "500",
        message: ""
      }
      if (this.registers.userName === '') {
        res.message = "用户名为空"
      } else if (this.registers.password1 === '') {
        res.message = "密码为空"
      } else if (this.registers.password1 !== this.registers.password2) {
        res.message = "密码不一致"
      }
      if (res.message === '') {
        let uploadUser = {
          userName: this.registers.userName,
          password: this.registers.password1,
          role: "user",
        }
        let res = await net_register(uploadUser);
        if (res.code === "200") {
          this.isLogin = true;
        }
        this.$store.commit("tip", res);
        this.registers = {
          userName: '',
          password1: '',
          password2: ''
        }
      } else {
        this.$store.commit("tip", res);
      }
    }
  },
  created() {
    this.fullHeight = "height:" + (document.documentElement.clientHeight) + "px";
    sessionStorage.setItem("loading", "true");
  },
  mounted() {
    setTimeout(() => {
      this.loginStyle = "opacity: 1;top:0;"
    }, 10)
  }
}
</script>

<style scoped>
.submit {
  position: fixed;
  transition: all 1.5s;
  opacity: 0;
  top: -80px;
  bottom: 10px;
  right: 0;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.66);
  border-radius: 10%;
  width: 490px;
  z-index: 10;
  padding: 5px 10px;
}
</style>

我的界面

我的界面,这里用的element的插件库库里面的Descriptions

通过之前的axios调用之前的用户信息接口实现,

然后再在自己把用户的头像展示到最上面,一个最基础的我的界面就完成了

最后,加上退出按钮,让用户登出,我的界面就基本完成了,这个是用element快速的搭建大概架构,同时大家也可以增加一些收藏,修改,充值,订单等功能去丰富里面的内容

核心代码的话,大家可以去了解一下我的这下面的代码

<template>
  <div style="position:relative;min-height: 600px">
    <div style="text-align: center;margin:60px 0;">
      <div>
        <img :src="user.avatar" style="width:210px;border-radius: 50%"/>
      </div>
      <div style="margin-top:21px">
        <strong
          style="font-size: 22px;padding:10px 20px;background-color: #62bc3e;border-radius: .6em;color: white">{{
            user.userName
          }}</strong>
      </div>
    </div>
    <div style="width: 65%;margin:30px auto">
      <el-menu :default-active="isInfo+''" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="isInfo='1';getInfo()"><strong>基础信息</strong></el-menu-item>
        <el-menu-item index="2" @click="isInfo='2';getCollection()"><strong>收藏</strong></el-menu-item>
        <el-menu-item index="3" @click="isInfo='3';getOrder()"><strong>我的订单</strong></el-menu-item>
      </el-menu>
      <div>
        <div v-if="isInfo==='1'">
          <el-descriptions class="margin-top" :column="2" border >
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                用户名
              </template>
              {{ user.userName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{user.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                钱包
              </template>
              ¥ {{ user.wallet }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                权限
              </template>
              <el-tag size="small">{{ user.role }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                居住地
              </template>
              {{ user.address }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 10px;display: flex;justify-content: right">
            <el-button @click="rechargeVisible=true" type="danger">充值</el-button>
            <el-button icon="el-icon-edit" type="warning" @click="editVisible=true;updBefore()"/>
          </div>

        </div>
        <div v-else-if="isInfo==='2'" style="padding:5px 20px">
          <div v-if="collection.length>0">
          <large-info v-for="(item,index) in collection" :key="index">
            <div slot="category">{{item.categoryName}}</div>
            <div slot="category">{{ item.category }}</div>
            <div slot="title">{{ item.goodTitle }}</div>
            <span slot="content" @click="$router.push({path:'/home/good_info',query:{id:item.goodId}})">{{
                item.content.substring(0, 80)
              }}......</span>
            <div slot="image"><img :src="item.imgUrl" alt="图片" style="height: 100px;border-radius: 1em"></div>
            <div slot="bottom" style="font-size: 12px;width: 100%;;margin-top: 5px">
              <del>市场价: ¥{{ item.oldPrice }}</del>
              <span style="margin-left: 10px">现价: <strong style="color: chocolate">¥{{ item.price }}</strong></span>
              <div style="margin-top: 10px">
                时间:{{item.createTime}}
              </div>
            </div>
          </large-info>
          </div>
          <el-empty  v-else description="收藏里面啥也没有"/>
        </div>
        <div v-else style="padding:10px 20px">
          <div v-if="order.length>0">
          <large-info v-for="(item,index) in order" :key="index">
            <div slot="category">{{item.categoryName}}</div>
            <div slot="title">{{ item.goodTitle }}</div>
            <div slot="content" style="display: flex;justify-content: space-between">
              <span  @click="$router.push({path:'/home/good_info',query:{id:item.goodId}})">
              {{item.content.substring(0, 80) }}......</span>
              <el-button type="info" v-if="item.orderStatus==='0'" @click="tipUser()">提醒发货</el-button>
              <el-button type="success" v-else-if="item.orderStatus==='1'" @click="changeStatus(item.orderId)">确认收货</el-button>
              <el-button  type="warning" disabled v-else-if="item.orderStatus==='2'">已收货</el-button>
            </div>
            <div slot="image"><img :src="item.imgUrl" alt="图片" style="height: 100px;border-radius: 1em"></div>
            <div slot="bottom" style="font-size: 13px;; width: 100%;">
              <div style="display: flex;justify-content: space-between;margin-bottom: 10px">
                <span>数量: {{item.number}}</span>
                <del>市场价: ¥{{ item.oldPrice }}</del>
                <span>现价: <strong style="color: chocolate">¥{{ item.price }}</strong></span>
              </div>
              <div style="display: flex;justify-content: space-between">
                <span>成交价: <strong style="color: red">¥{{ item.price }}</strong></span>
                <span>成交时间: {{ item.createTime }}</span>
                <span>购买人:{{item.userName}}</span>
              </div>
            </div>
          </large-info>
          </div>
          <el-empty  v-else description="订单里面啥也没有"/>
        </div>
      </div>
    </div>
    <div style="position:absolute;top:10px;right: 30px">
      <el-button type="danger" @click="exit()"><strong>退出</strong></el-button>
    </div>

    <el-dialog
      title="修改用户"
      :visible.sync="editVisible"
      width="40%"
      center>
      <el-form>
        <el-form-item label="用户名" required>
          <el-input v-model="editParam.userName" readonly onfocus="this.removeAttribute('readonly');"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="editParam.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="editParam.phone" type="number"></el-input>
        </el-form-item>
        <el-form-item label="地址" required>
          <el-input v-model="editParam.address"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <div>&nbsp</div>
          <div style="display: flex">
            <div style="margin-right:50px" v-if="editParam.avatar">
              <img :src="editParam.avatar" alt="头衔" style="height:100px; border-radius: 10%;">
            </div>
            <el-upload
              v-if="!isUpload"
              class="upload-demo"
              action="#"
              :on-change="getFile"
              multiple
              :limit="1"
              :auto-upload="false"
              style="position:relative;top:10px;text-align: center;">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="info" @click="editVisible=false">取 消</el-button>
    <el-button type="success" @click="updateUser();editVisible=false">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      :visible.sync="rechargeVisible"
      title="充值界面"
      width="550px"
      :close-on-click-modal="false"
    >
      <div>
        <el-form>
          <el-form-item label="充值金额">
            <el-input type="number" v-model="rechargePrice"></el-input>
          </el-form-item>
          <el-form-item label="请选择充值金额">
            <div style="margin:10px 0">
              <el-radio-group v-model="rechargePrice">
                <el-radio label="0" border>自定义</el-radio>
              </el-radio-group>
            </div>
            <el-radio-group v-model="rechargePrice" >
              <el-radio-button label="20" border>¥20</el-radio-button>
              <el-radio-button label="30" border>¥30</el-radio-button>
              <el-radio-button label="50" border>¥50</el-radio-button>
              <el-radio-button label="100" border>¥100</el-radio-button>
              <el-radio-button label="200" border>¥200</el-radio-button>
              <el-radio-button label="500" border>¥500</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所需要支付金额">
            <span style="color: #ff5f23">¥{{ rechargePrice }}.0</span>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="rechargeVisible = false">取消</el-button>
        <el-button type="success" @click="rechargeVisible = false;recharge()" :disabled="rechargePrice==='0'">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {net_getCollections, net_getOrder, net_info, net_recharge,} from "../../../net/before/mine";
import largeInfo from "../../../components/common/largeInfo";
import {net_selectUser, net_updateUser} from "../../../net/back/user";
import {uploadFile} from "../../../net/back/file";
import {net_changeStatus} from "../../../net/back/order";

export default {
  name: "mine",
  components: {
    largeInfo
  },
  data() {
    return {
      user: '',
      isInfo: '1',
      collection: '',
      order: [],
      editVisible: false,
      isUpload: false,
      editParam: {
        role: '',
        userName: '',
        phone: '',
        address: '',
        password: '',
        avatar: '',
      },
      rechargeVisible: false,
      rechargePrice: '0',
    }
  },
  methods: {
    getInfo(){
      sessionStorage.setItem("isInfo","1");
    },
    async getCollection() {
      sessionStorage.setItem("isInfo","2");
      let res = await net_getCollections({userId: sessionStorage.getItem("id")});
      this.collection = res.data;
    },
    async getOrder() {
      sessionStorage.setItem("isInfo","3");
      let res = await net_getOrder({userId: sessionStorage.getItem("id")});
      this.order = res.data;
    },
    exit() {
      sessionStorage.clear();
      this.$router.push("/login")
      let res = {
        code: "200",
        data: "登出成功!"
      }
      this.$store.commit("tip", res);
    },
    async getFile(file) {
      let data = new FormData();
      data.append("file", file.raw);
      data.append("category", "avatar");
      data.append("md5", "1");
      let res = (await uploadFile(data)).data;
      if (res.code === "200") {
        this.editParam.avatar = res.data.path;
        this.isUpload = true;
      }
      this.$store.commit("tip", res);
    },
    verify() {
      let res = {
        code: "500",
        message: ""
      };
      if (this.editParam.userName === "") {
        res.message = "用户名字未填写";
      } else if (this.editParam.password === "") {
        res.message = "用户密码未填写";
      } else if (this.editParam.role === "") {
        res.message = "用户权限没有填写"
      }
      if (res.message !== "") {
        this.$store.commit("tip", res);
        return false;
      } else {
        return true;
      }
    },
    async updBefore() {
      this.editParam = (await net_selectUser({user_id: sessionStorage.getItem("id")})).data[0];
      this.editTitle = this.$route.name + "(修改)";
    },
    async updateUser() {
      let res2 = await net_updateUser(this.editParam);
      this.$store.commit("tip", res2);
      this.isUpload = true;
      let res = await net_info({user_id: sessionStorage.getItem("id")});
      this.user = res.data[0];
    },
    async changeStatus(id){
      let res = await net_changeStatus({orderId:id,orderStatus:2});
      if(res.code==="200"){
        await this.getOrder();
      }
      this.$store.commit("tip",res);
    },
    tipUser(){
      this.$store.commit("tip",{code:"200",message:"操作成功!"})
    },
    async recharge(){
      let res = await net_recharge({price: this.rechargePrice,userId:sessionStorage.getItem("id")})
      this.$store.commit("tip", res);
      if (res.code === "200") {
        let res = await net_info({id: sessionStorage.getItem("id")});
        this.user = res.data[0];
      }
    }
  },
  async created() {
    let res = await net_info({id: sessionStorage.getItem("id")});
    this.user = res.data[0];
    if(sessionStorage.getItem("isInfo")){
      this.isInfo=sessionStorage.getItem("isInfo");
    }
    await this.getCollection();
    await this.getOrder();
  },
}
</script>

<style scoped>

</style>

商品详情界面

商品详情界面的话,无非就是一些商品的展示以及商品的价格,简介,还有购买等功能,这里就没啥好说的一个img,一个el-button就可以解决

大家有能力的话,也可以添加一个收藏按钮,把收藏功能对接上去就行,

<template>
  <div style="width:70%;margin:30px auto;min-height: 700px">
      <div style="display: flex;margin:30px 20px 30px 50px;justify-content: center">
        <img :src="goodInfo.imgUrl" style="height: 350px;">
        <div style="margin-left: 30px">
          <div style="margin:30px 0">
            <strong style="font-size: 30px">
              <slot name="title"/>
              {{ goodInfo.goodTitle }}</strong>
          </div>
          <div style="color:grey">市场价:
            <del>¥{{ goodInfo.oldPrice }}</del>
          </div>
          <div style="font-weight: bold;margin-top: 10px;font-size: 18px">原价: <span
            style="color: coral;font-size: 25px">¥{{ goodInfo.price }}</span></div>
          <div style="margin-top: 30px">
            <el-button type="warning" @click="add_collection()">收藏</el-button>
          </div>
          <div style="margin-top: 30px">
            <el-input-number v-model="number"/>
          </div>
          <div style="margin-top: 20px">
            <el-button type="danger" @click="beforePay()">立即购买</el-button>
          </div>
        </div>
      </div>
      <div style="margin-top:30px;letter-spacing: 2px;font-size: 1.2em;line-height: 1.5em;color: #4d4d4d"
           v-if="goodInfo">
        <p v-html='goodInfo.content.replaceAll("。", "。<br/>&emsp;&emsp;")' style="text-indent: 55px"></p>
      </div>
    <el-dialog
      title="支付接口"
      :visible.sync="payVisible"
      width="40%"
      center>
      <el-form>
        <el-form-item label="钱包余额">
          <span style="font-weight: bold;color: coral">¥{{ wallet }}</span>
        </el-form-item>
        <el-form-item label="商品价">
          <span style="font-weight: bold;color: red">-¥{{ goodInfo.price }} x {{number}}</span>
        </el-form-item>
        <el-form-item label="余额">
          <span style="font-weight: bold;color: chocolate">¥{{
              parseFloat(wallet) - (parseFloat(goodInfo.price)*number)
            }}</span>
          <strong
            style="margin-left: 30px;color: #f4b023">{{
              parseFloat(wallet) - (parseFloat(goodInfo.price)*number) >= 0 ? "钱包余额能购买" : "余额不够.请联系管理员充值!"
            }}</strong>
        </el-form-item>
        <el-form-item>
          <img :src="this.goodInfo.imgUrl" style="height: 50px"/>
        </el-form-item>
        <div style="display: flex;justify-content: right">
          <el-button type="info" @click="payVisible=false">取 消</el-button>
          <el-button type="danger" @click="pay(parseFloat(wallet)-parseFloat(goodInfo.price))"
                     :disabled="parseFloat(wallet) - (parseFloat(goodInfo.price)*number)<0">确 定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {net_selectUser} from "../../../net/back/user";
import {net_pay} from "../../../net/before/mine";
import {net_addCollection, net_getCategoryProperty} from "../../../net/before/property";

export default {
  name: "goodInfo",
  data() {
    return {
      goodInfo: '',
      payVisible: false,
      wallet: 0,
      number:1,
    }
  },
  methods: {
    async beforePay() {
      if (sessionStorage.getItem("id")) {
        let res = await net_selectUser({userId: sessionStorage.getItem("id")})
        this.wallet = res.data[0].wallet;
        this.payVisible = true;
      } else {
        let res = {
          code: "500",
          message: "请先登录!"
        }
        await this.$router.push("/login");
        this.$store.commit("tip", res);
      }
    },
    async pay(wallet) {
      let res = await net_pay({userId: sessionStorage.getItem("id"), wallet: wallet,goodId:this.goodInfo.goodId,number:this.number});
      this.$store.commit("tip", res);
      this.payVisible = false;
      await this.$router.push("/home/mine");
    },
    async add_collection() {
      if(sessionStorage.getItem("id")) {
        let res = await net_addCollection({userId: sessionStorage.getItem("id"), goodId: this.goodInfo.goodId})
        if (res.code !== "200") {
          res = {
            code: "500",
            message: "请勿重复收藏!"
          }
        }
        this.$store.commit("tip", res);
      }else{
        let res = {
          code: "500",
          message: "请先登录!"
        }
        await this.$router.push("/login");
        this.$store.commit("tip", res);
      }
    },
  },
  async created() {
    let res = await net_getCategoryProperty({goodId: this.$route.query.id});
    this.goodInfo = res.data[0];
  }
}
</script>

<style scoped>

</style>

值得注意的是,详细内容的话,我用到了replaceAll(),把句号,空格等换成/n换行符,这样详细内容,就会看起来层次分明起来

<p v-html='goodInfo.content.replaceAll("。", "。<br/>&emsp;&emsp;")' style="text-indent: 55px"></p>

这样加上一些其他的事件以及支付接口我们这个商品详情页面就解决了,

同上,附上自己的代码

<template>
  <div style="width:70%;margin:30px auto;min-height: 700px">
      <div style="display: flex;margin:30px 20px 30px 50px;justify-content: center">
        <img :src="goodInfo.imgUrl" style="height: 350px;">
        <div style="margin-left: 30px">
          <div style="margin:30px 0">
            <strong style="font-size: 30px">
              <slot name="title"/>
              {{ goodInfo.goodTitle }}</strong>
          </div>
          <div style="color:grey">市场价:
            <del>¥{{ goodInfo.oldPrice }}</del>
          </div>
          <div style="font-weight: bold;margin-top: 10px;font-size: 18px">原价: <span
            style="color: coral;font-size: 25px">¥{{ goodInfo.price }}</span></div>
          <div style="margin-top: 30px">
            <el-button type="warning" @click="add_collection()">收藏</el-button>
          </div>
          <div style="margin-top: 30px">
            <el-input-number v-model="number"/>
          </div>
          <div style="margin-top: 20px">
            <el-button type="danger" @click="beforePay()">立即购买</el-button>
          </div>
        </div>
      </div>
      <div style="margin-top:30px;letter-spacing: 2px;font-size: 1.2em;line-height: 1.5em;color: #4d4d4d"
           v-if="goodInfo">
        <p v-html='goodInfo.content.replaceAll("。", "。<br/>&emsp;&emsp;")' style="text-indent: 55px"></p>
      </div>
    <el-dialog
      title="支付接口"
      :visible.sync="payVisible"
      width="40%"
      center>
      <el-form>
        <el-form-item label="钱包余额">
          <span style="font-weight: bold;color: coral">¥{{ wallet }}</span>
        </el-form-item>
        <el-form-item label="商品价">
          <span style="font-weight: bold;color: red">-¥{{ goodInfo.price }} x {{number}}</span>
        </el-form-item>
        <el-form-item label="余额">
          <span style="font-weight: bold;color: chocolate">¥{{
              parseFloat(wallet) - (parseFloat(goodInfo.price)*number)
            }}</span>
          <strong
            style="margin-left: 30px;color: #f4b023">{{
              parseFloat(wallet) - (parseFloat(goodInfo.price)*number) >= 0 ? "钱包余额能购买" : "余额不够.请联系管理员充值!"
            }}</strong>
        </el-form-item>
        <el-form-item>
          <img :src="this.goodInfo.imgUrl" style="height: 50px"/>
        </el-form-item>
        <div style="display: flex;justify-content: right">
          <el-button type="info" @click="payVisible=false">取 消</el-button>
          <el-button type="danger" @click="pay(parseFloat(wallet)-parseFloat(goodInfo.price))"
                     :disabled="parseFloat(wallet) - (parseFloat(goodInfo.price)*number)<0">确 定
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {net_selectUser} from "../../../net/back/user";
import {net_pay} from "../../../net/before/mine";
import {net_addCollection, net_getCategoryProperty} from "../../../net/before/property";

export default {
  name: "goodInfo",
  data() {
    return {
      goodInfo: '',
      payVisible: false,
      wallet: 0,
      number:1,
    }
  },
  methods: {
    async beforePay() {
      if (sessionStorage.getItem("id")) {
        let res = await net_selectUser({userId: sessionStorage.getItem("id")})
        this.wallet = res.data[0].wallet;
        this.payVisible = true;
      } else {
        let res = {
          code: "500",
          message: "请先登录!"
        }
        await this.$router.push("/login");
        this.$store.commit("tip", res);
      }
    },
    async pay(wallet) {
      let res = await net_pay({userId: sessionStorage.getItem("id"), wallet: wallet,goodId:this.goodInfo.goodId,number:this.number});
      this.$store.commit("tip", res);
      this.payVisible = false;
      await this.$router.push("/home/mine");
    },
    async add_collection() {
      if(sessionStorage.getItem("id")) {
        let res = await net_addCollection({userId: sessionStorage.getItem("id"), goodId: this.goodInfo.goodId})
        if (res.code !== "200") {
          res = {
            code: "500",
            message: "请勿重复收藏!"
          }
        }
        this.$store.commit("tip", res);
      }else{
        let res = {
          code: "500",
          message: "请先登录!"
        }
        await this.$router.push("/login");
        this.$store.commit("tip", res);
      }
    },
  },
  async created() {
    let res = await net_getCategoryProperty({goodId: this.$route.query.id});
    this.goodInfo = res.data[0];
  }
}
</script>

<style scoped>

</style>

网站简介

这个就没啥好说的,最简单的形式就是一个logo,然后用p标签text-indent:2em 做出段落换行效果,同时把网站内容写入就可以了,这个没啥好说,当然大家可以进行适当的优化一下,做得美观一点

还是附上自己的代码

<template>
  <div style="padding: 30px 0;width:90%;margin:30px auto;min-height: 600px">
    <h3 style="text-align: center">公司简介</h3>
    <div style="margin-top: 20px;font-size: 18px;line-height: 30px;">
      <div style="text-align: center">
        <img src="static/logo.svg" style="width: 200px">
      </div>
      <div style="margin:50px auto;width: 65%;">
        <p style="text-indent: 2em;">
          农家乐是新兴的旅游休闲形式，一种回归自然从而获得身心放松、愉悦精神的休闲旅游方式。一般来说，农家乐的业主利用当地的农产品进行加工，满足客人的需要，成本较低，因此消费就不高。而且农家乐周围一般都是美丽的自然或田园风光，空气清新，环境放松，可以舒缓现代人的精神压力，因此受到很多城市人群的喜爱。
        </p>
        <p style="text-indent: 2em;">
          乡村旅游在国外已有30多年的历史，开展得比较成功的，大部分是一些欧美发达国家。20世纪60年代初，当时的旅游大国西班牙把乡村的城堡进行一定的装修改造成为饭店，用以留宿过往客人，这种饭店称为“帕莱多国营客栈”；同时，把大农场、庄园进行规划建设，提供徒步旅游、骑马、滑翔、登山、漂流、参加农事活动等项目，从而开创了世界乡村旅游的先河。以后，乡村旅游在美国、法国、波兰、日本等国家得到倡导和大发展。1996年，美国农村客栈总收入为40亿美元。1997年，美国有1800万人前往乡村、农场度假，仅在美国东部便有1500个观光农场，在西部还有为数众多的专门用于旅游的牧场。法国有1.6万多户农家建立了家庭旅馆，推出农庄旅游,全国33%的游人选择了乡村度假，乡村旅游每年接待游客200万,能给农民带来700亿法郎的收入，相当于全国旅游收入的1/4。在欧美国家，乡村旅游已具有相当规模，并已走上了规范化发展的轨道，显示出极强的生命力和巨大的发展潜力
        </p>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "press"
}
</script>

<style scoped>
.main-titles::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  width: 10%;
  height: 3px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ba2327;
  z-index: 1;
}

.main-titles:hover,
.press-title:hover {
  color: #4a4a4a;
}

.press-item {
  display: flex;
  justify-content: space-between;
}

.press-item div {
  width: 30%;
}

.press-item img {
  width: 100%;
  border-radius: 10px;
}

.press-item img:hover {
  transition: all .3s linear;
  transform: translate3d(0, -2px, 0);
}
</style>

从0开始教你三天完成毕业设计-项目设计_Black Jun的博客-CSDN博客作为一个初学java的小萌新,用java的springboot框架一时间加急写出来一个项目的话还是有难度的,当然mbatis-plus的代码生成器是可以的,但是比较晦涩难懂,加上配置的问题,所以我这里就不推荐用java,听说php停简单的,因此,为了完成这篇文章我特意花了半天学完了php的phpthink框架,这个项目我们用前后端分离的模式,毕竟冗杂的时代已经快过去了,追上时代潮流,才能成为让老师眼前一亮的毕业设计.https://blog.csdn.net/BlackjunPJH/article/details/127064484?spm=1001.2014.3001.5502

从0开始教你三天完成毕业设计-后端api_Black Jun的博客-CSDN博客_后端毕业设计经过前面的文档,我们已经完成了设计阶段和环境配置,如果没有的话,可以先去浏览这篇文章这篇文章,我们来教大家thinkphp后端api接口书写https://blog.csdn.net/BlackjunPJH/article/details/127084314?spm=1001.2014.3001.5502

从0开始教你三天完成毕业设计-前端之首页_Black Jun的博客-CSDN博客我这里主要用到了vue+element-ui,大概有不懂的,可以看下面https://blog.csdn.net/BlackjunPJH/article/details/128098608

从0开始教你三天完成毕业设计-前端之后台管理_Black Jun的博客-CSDN博客同理的话,我们还是用vue+element有不懂的话,可以看看前面两篇文章,上面有vue以及element的介绍,这里的话我们还是element的表格插件,同时后台管理界面无非就是一个crud,增删改查所以我这里就用一个界面进行举例说明。https://blog.csdn.net/BlackjunPJH/article/details/128103279?spm=1001.2014.3001.5502