一、Git
分布式版本管理工具
git指令
1 创建git本地仓库
创建文件夹,cd到文件夹中,执行
git init
2 git status 查看仓库状态
3 git add 文件名称(.表示所有文件和目录)
commit之前必须配置用户
git config --global user.name cui
git config --global user.email xx@qq.com
4 git commit -m '描述' 生成版本
二、luffcc项目前端(首页)
1.项目搭建
创建项目目录
cd 项目目录
vue init webpack luffcc
在pycharm添加快捷运行vue项目:
![](https://i-blog.csdnimg.cn/blog_migrate/921f6c804b6c3fc2cd8bfcdf60a59add.png#pic_center)
2.项目结构及整体代码
项目整体结构:
config->index.js
// Various Dev Server settings
host: 'www.luffcc.com', // can be overwritten by process.env.HOST
Vheader.vue
<template>
<div class="total-header">
<div class="header">
<el-container>
<el-header class="header-cont" height="80px">
<el-row>
<el-col class="logo" :span="3">
<a href="/">
<img src="@/assets/header-logo.svg" alt="">
</a>
</el-col>
<el-col class="nav" :span="10">
<el-row>
<el-col :span="3">
<router-link to="/" class="active">免费课</router-link>
</el-col>
<el-col :span="3">
<router-link to="/">轻课</router-link>
</el-col>
<el-col :span="3">
<router-link to="/">学位课</router-link>
</el-col>
<el-col :span="3">
<router-link to="/">题库</router-link>
</el-col>
<el-col :span="3">
<router-link to="/">教育</router-link>
</el-col>
</el-row>
</el-col>
<el-col class="header-right-box" :span="11">
<div class="search">
<input type="text" id="Input" placeholder="请输入想搜索的课程" style="" @blur="inputShowHandler" ref="Input" v-show="!s_status">
<ul @click="ulShowHandler" v-show="s_status" class="search-ul" ref="xx">
<span>Python</span>
<span>Linux</span>
</ul>
<p>
<img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status">
<img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status">
<img class="new" src="@/assets/new.png" alt="">
</p>
</div>
<div class="register" v-show="!token">
<router-link to="/login">
<button class="aigin">登录</button>
</router-link>
|
<a target="_blank" href="https://www.luffcc.com/signup">
<router-link to="/register">
<button class="signup">注册</button>
</router-link>
</a>
</div>
<div class="shop-car" v-show="token">
<router-link to="/cart">
<b>6</b>
<img src="@/assets/shopcart.png" alt="">
<span>购物车 </span>
</router-link>
</div>
<div class="nav-right-box" v-show="token">
<div class="nav-right">
<router-link to="/myclass">
<div class="nav-study">我的教室</div>
</router-link>
<div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut">
<img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243,243,243);">
<ul class="home-my-account" v-show="list_status" @mouseover="personInfoList">
<li>
我的账户
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
<li>
我的订单
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
<li>
贝里小卖铺
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
<li>
我的优惠券
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
<li>
<span>
我的消息
<b>(26)</b>
</span>
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
<li>
退出
<img src="https://hcdn2.luffycity.com/media/frontend/activity/back_1568185800.821227.svg" alt="">
</li>
</ul>
</div>
</div>
</div>
</el-col>
</el-row>
</el-header>
</el-container>
</div>
</div>
</template>
<script>
export default {
name: "Vheader",
data() {
return {
token: true, // 登录成功与否的标记
s_status: true, // 放大镜效果切换控制,默认input标签不显示
list_status: false, // 个人中心下拉菜单是否显示
}
},
methods: {
ulShowHandler() {
this.s_status = false;
console.log(this.$refs);
//延迟回调方法,Vue中DOM更新是异步的,也就是说让Vue去显示我们的input标签的操作是异步的,如果我们直接执行this.$refs.Input.focus();是不行的
// 当方法的DOM操作完成之后,才执行延时动作
// this.$nextTick(function () {
// console.log(this);
// this.$refs.Input.focus();
// });
this.$nextTick(()=>{
console.log(this);
this.$refs.Input.focus();
});
},
inputShowHandler() {
console.log('xxxx')
this.s_status = true;
},
personInfoList() {
this.list_status = true;
},
personInfoOut() {
this.list_status = false;
}
}
}
</script>
<style scoped>
.header-cont .nav .active {
color: #f5a623;
font-weight: 500;
border-bottom: 2px solid #f5a623;
}
.total-header {
min-width: 1200px;
z-index: 100;
box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1);
}
.header {
width: 1200px;
margin: 0 auto;
}
.header .el-header {
padding: 0;
}
.logo {
height: 80px;
/*line-height: 80px;*/
/*text-align: center;*/
display: flex; /* css3里面的弹性布局,高度设定好之后,设置这个属性就能让里面的内容居中 */
align-items: center;
}
.nav .el-row .el-col {
height: 80px;
line-height: 80px;
text-align: center;
}
.nav a {
font-size: 15px;
font-weight: 400;
cursor: pointer;
color: #4a4a4a;
text-decoration: none;
}
.nav .el-row .el-col a:hover {
border-bottom: 2px solid #f5a623
}
.header-cont {
position: relative;
}
.search input {
width: 185px;
height: 26px;
font-size: 14px;
color: #4a4a4a;
border: none;
border-bottom: 1px solid #ffc210;
outline: none;
}
.search ul {
width: 185px;
height: 26px;
display: flex;
align-items: center;
padding: 0;
padding-bottom: 3px;
border-bottom: 1px solid hsla(0, 0%, 59%, .25);
cursor: text;
margin: 0;
font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif;
}
.search .search-ul, .search #Input {
padding-top: 10px;
}
.search ul span {
color: #545c63;
font-size: 12px;
padding: 3px 12px;
background: #eeeeef;
cursor: pointer;
margin-right: 3px;
border-radius: 11px;
}
.hide {
display: none;
}
.search {
height: auto;
display: flex;
}
.search p {
position: relative;
margin-right: 20px;
margin-left: 4px;
}
.search p .icon {
width: 16px;
height: 16px;
cursor: pointer;
}
.search p .new {
width: 18px;
height: 10px;
position: absolute;
left: 15px;
top: 0;
}
.register {
height: 36px;
display: flex;
align-items: center;
line-height: 36px;
}
.register .signin, .register .signup {
font-size: 14px;
color: #5e5e5e;
white-space: nowrap;
}
.register button {
outline: none;
cursor: pointer;
border: none;
background: transparent;
}
.register a {
color: #000;
outline: none;
}
.header-right-box {
height: 100%;
display: flex;
align-items: center;
font-size: 15px;
color: #4a4a4a;
position: absolute;
right: 0;
top: 0;
}
.shop-car {
width: 99px;
height: 28px;
border-radius: 15px;
margin-right: 20px;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.shop-car b {
position: absolute;
left: 28px;
top: -1px;
width: 18px;
height: 16px;
color: #fff;
font-size: 12px;
font-weight: 350;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #ff0826;
overflow: hidden;
transform: scale(.8);
}
.shop-car img {
width: 20px;
height: 20px;
margin-right: 7px;
}
.nav-right-box {
position: relative;
}
.nav-right-box .nav-right {
float: right;
display: flex;
height: 100%;
line-height: 60px;
position: relative;
}
.nav-right .nav-study {
font-size: 15px;
font-weight: 300;
color: #5e5e5e;
margin-right: 20px;
cursor: pointer;
}
.nav-right .nav-study:hover {
color: #000;
}
.nav-img img {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.home-my-account {
position: absolute;
right: 0;
top: 60px;
z-index: 101;
width: 190px;
height: auto;
background: #fff;
border-radius: 4px;
box-shadow: 0 4px 8px 0 #d0d0d0;
}
li {
list-style: none;
}
.home-my-account li {
height: 40px;
font-size: 14px;
font-weight: 300;
color: #5e5e5e;
padding-left: 20px;
padding-right: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.home-my-account li img {
cursor: pointer;
width: 5px;
height: 10px;
}
.home-my-account li span {
height: 40px;
display: flex;
align-items: center;
}
.home-my-account li span b {
font-weight: 300;
margin-top: -2px;
}
</style>
Banner.vue
<template>
<el-carousel indicator-position="outside" height="400px">
<el-carousel-item v-for="(value,index) in banner_list" :key="value.id">
<router-link :to="value.url">
<img :src="value.img_src" alt="" style="width: 100%;height: 400px;">
</router-link>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
name: "Banner",
data() {
return {
banner_list:[
// {id:1, img_src:require('@/assets/banner1.png'), url:'http://www.baidu.com'},
// {id:2, img_src:require('@/assets/banner2.png'), url:'http://www.baidu.com'},
// {id:3, img_src:require('@/assets/banner3.png'), url:'http://www.baidu.com'},
// 当使用文件路径使用数据属性动态生成到试图当中时,不能使用@符号,如果想说那个@符号,那么需要我们自动调用require方法,对路径进行转换,不然就将图片文件放到static文件夹下面。
{id:1, img_src:'../../../static/img/banner1.png', url:'http://www.baidu.com'},
{id:1, img_src:'../../../static/img/banner2.png', url:'http://www.baidu.com'},
{id:1, img_src:'../../../static/img/banner3.png', url:'http://www.baidu.com'},
]
}
}
}
</script>
<style scoped>
</style>
Footer.vue
<template>
<div class="footer">
<div class="footer-item">
<div class="foot-left">
<div class="foot-content">
<p>
<span>关于我们</span>
|
<span>贝里小卖铺</span>
</p>
<p>
地址:北京市昌平区顺沙路八号院汇德商厦402 邮箱:customer@luffycity.com
</p>
<p>
© 2017-2020 北京路飞学城教育科技有限公司版权所有
<a class="copyright" href="http://beian.miit.gov.cn" target="_blank">京ICP备17072161号-1</a>
</p>
<p>
<a class="report-link" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102002019&token=1ee3034d-ba3a-4cc3-89d4-89875e2dd0b1">
<img class="report-img" src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" alt="" style="float: left">
京公网安备 11010102002019号
</a>
</p>
</div>
</div>
<img class="code" src="@/assets/code.png" alt="">
</div>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
.footer{
display: flex;
align-items: center;
width: 100%;
height: 140px;
flex-direction: column;
overflow: hidden;
background: #191c25;
}
.footer .foot-left{
display: flex;
align-items: center;
}
.footer .foot-left .foot-content p{
margin-bottom: 10px;
font-size: 13px;
font-family: PingFangSC-Regular;
font-weight: 400;
color: #d0d0d0;
}
.footer-item{
width: 960px;
height: 100%;
justify-content: space-between;
}
.foot-left{
display: flex;
align-items: center;
float: left;
}
.foot-content a{
color: #d0d0d0;
}
.footer .foot-left .foot-content p:first-child span{
font-size: 16px;
font-weight: 400;
display: inline-block;
font-family: PingFangSC-Regular;
cursor: pointer;
}
.foot-content .report-img{
display: inline-block;
height: 20px;
margin-right: 12px;
}
.footer-item .code{
width: 74px;
height: auto;
margin-right: 100px;
float: right;
padding-top: 30px;
}
.copyright {
text-decoration: none;
}
.report-link {
text-decoration: none;
}
</style>
Home.vue
<template>
<div class="home">
<Vheader></Vheader>
<Banner></Banner>
<Footer></Footer>
</div>
</template>
<script>
import Vheader from "./common/Vheader";
import Banner from "./common/Banner";
import Footer from "./common/Footer";
export default {
name: "Home",
data() {
return {
title:'Home组件'
}
},
components:{
Vheader,
Banner,
Footer
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
router->index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";
Vue.use(Router)
const routes = [
{
path: '/home',
component:Home,
},
{
path: '/',
component: Home,
}
]
export default new Router({
mode: 'history', // 固定模式
routes,
})
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
ul{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})