前台主页功能-前台轮播图功能完成-git介绍和安装-git使用流程-git常用命令-git忽略文件

昨日内容回顾

  1. # 1 前端配置
  2. 	全局css
  3.     全局js
  4.     引入axios
  5.     引入vue-cookies
  6.     引入elementui
  8.     引入bootstrap，jq(这个项目中用不到)
  10. # 2 分析首页功能---> 设计轮播图表
  11. 	公共字段---> 抽取成公共的Model类 BaseModel---> abstract
  12.     Banner表
  14. # 3 写轮播图接口
  15. 	路由：自动生成路由 总路由分发 api/v1/home banner
  16.     	router.register(banner,视图类,别名)
  17.         get请求 不带id 映射成视图类中的list
  19.     视图类中
  21.     序列化
  23. # 4 后台管理---> simpleui
  24. 	录入数据

今日内容概要

  • 0 导出项目依赖

  • 0 学长问题解析

  • 1 前台主页功能

    • 1.1 Header组件
    • 1.2 Banner组件
    • 1.3 Footer组件

  • 2 前台轮播图功能完成

  • 3 git介绍和安装

    • 3.1 git gitee github gitlab

  • 4 git使用流程

    • 4.1 git软件安装
    • 4.2 git工作流程

  • 5 git常用命令

  • 6 git忽略文件

今日内容详细

0 导出项目依赖

  1. # mac 系统 mysqlclient装不了 使用pymysql
  3. # 本地用pymysql上线 使用mysqlclient
  4. # 本地开发环境的依赖和上线环境依赖不一样
  6. # 每个项目中都会有个requirements.txt文件 指明了所有依赖和版本
  7. 	生成：pip freeze  显示当前环境装的所有依赖
  8.     	pip freeze > requirements.txt  # 当前所有都放进去
  10.     新环境中 安装依赖
  11.     	pip install -r dev.txt   # 开发环境
  12.         pip install -r requirements.txt   # 上线环境环境

0 学长问题解析

  1. # 前端是个app 后端用django写的
  2. # app一打开 广告图片盖住 如果点击可以使用浏览器打开跳转 也可以跳转到自己app内部某个页面
  4. # 后端
  5. 	广告表：字段：img title link link_type:0/1
  6.     写好查询接口
  7.     新增接口
  9. # 前端
  10. 	一打开app 就调用接口---> 图片盖住
  11.     用户点击---> 跳转
  12.     	外部链接：判断是跳到外部 拿到link的值 直接打开浏览器即可
  13.         内部链接：判断是跳到内部 拿到link的值 根据页面名字 跳转到页面

1 前台主页功能

  1. # 首页页面组件
  2. # 头部组件(小组件)
  3. # 轮播图组件(小组件)
  4. # 尾部组件(小组件)

1.1 Header组件

  1. <template>
  2.     <div class="header">
  3.         <div class="slogan">
  4.             <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
  5.         </div>
  6.         <div class="nav">
  7.             <ul class="left-part">
  8.                 <li class="logo">
  9.                     <router-link to="/">
  10.                         <img src="../assets/img/head-logo.svg" alt="">
  11.                     </router-link>
  12.                 </li>
  13.                 <li class="ele">
  14.                     <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
  15.                 </li>
  16.                 <li class="ele">
  17.                     <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
  18.                 </li>
  19.                 <li class="ele">
  20.                     <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
  21.                 </li>
  22.             </ul>
  24.             <div class="right-part">
  25.                 <div>
  26.                     <span>登录</span>
  27.                     <span class="line">|</span>
  28.                     <span>注册</span>
  29.                 </div>
  30.       </div>
  31.         </div>
  32.     </div>
  34. </template>
  36. <script>
  38.     export default {
  39.         name: "Header",
  40.         data() {
  41.             return {
  42.                 // 当前所在路径，去sessionStorage取的，如果取不到，就是 /
  43.                 url_path: sessionStorage.url_path || '/',
  44.             }
  45.         },
  46.         methods: {
  47.             goPage(url_path) {
  48.                 // 已经是当前路由就没有必要重新跳转
  49.                 if (this.url_path !== url_path) {
  50.                     this.$router.push(url_path);
  51.                 }
  52.                 sessionStorage.url_path = url_path;
  53.             },
  54.         },
  55.         created() {
  56.             // 组件加载万成，就取出当前的路径，存到sessionStorage  this.$route.path
  57.             sessionStorage.url_path = this.$route.path;
  58.             // 把url_path = 当前路径
  59.             this.url_path = this.$route.path;
  60.         }
  61.     }
  62. </script>
  64. <style scoped>
  65.     .header {
  66.         background-color: white;
  67.         box-shadow: 0 0 5px 0 #aaa;
  68.     }
  70.     .header:after {
  71.         content: "";
  72.         display: block;
  73.         clear: both;
  74.     }
  76.     .slogan {
  77.         background-color: #eee;
  78.         height: 40px;
  79.     }
  81.     .slogan p {
  82.         width: 1200px;
  83.         margin: 0 auto;
  84.         color: #aaa;
  85.         font-size: 13px;
  86.         line-height: 40px;
  87.     }
  89.     .nav {
  90.         background-color: white;
  91.         user-select: none;
  92.         width: 1200px;
  93.         margin: 0 auto;
  95.     }
  97.     .nav ul {
  98.         padding: 15px 0;
  99.         float: left;
  100.     }
  102.     .nav ul:after {
  103.         clear: both;
  104.         content: '';
  105.         display: block;
  106.     }
  108.     .nav ul li {
  109.         float: left;
  110.     }
  112.     .logo {
  113.         margin-right: 20px;
  114.     }
  116.     .ele {
  117.         margin: 0 20px;
  118.     }
  120.     .ele span {
  121.         display: block;
  122.         font: 15px/36px '微软雅黑';
  123.         border-bottom: 2px solid transparent;
  124.         cursor: pointer;
  125.     }
  127.     .ele span:hover {
  128.         border-bottom-color: orange;
  129.     }
  131.     .ele span.active {
  132.         color: orange;
  133.         border-bottom-color: orange;
  134.     }
  136.     .right-part {
  137.         float: right;
  138.     }
  140.     .right-part .line {
  141.         margin: 0 10px;
  142.     }
  144.     .right-part span {
  145.         line-height: 68px;
  146.         cursor: pointer;
  147.     }
  148. </style>

1.2 Banner组件

  1. <template>
  2.   <div class="banner">
  3.     <el-carousel height="400px" :interval="5000" arrow="always">
  4.       <el-carousel-item v-for="item in img_list" :key="item.id">
  5.         <div v-if="item.link.indexOf('http')>-1">
  6.           <a :href="item.link">
  7.             <img :src="item.image" :alt="item.title">
  8.           </a>
  9.         </div>
  10.         <div v-else>
  11.           <router-link :to="item.link">
  12.             <img :src="item.image" :alt="item.title">
  13.           </router-link>
  14.         </div>
  16.       </el-carousel-item>
  17.     </el-carousel>
  18.   </div>
  19. </template>
  21. <script>
  22. export default {
  23.   name: "Banner",
  24.   data() {
  25.     return {
  26.       img_list: []
  27.     }
  28.   },
  29.   created() {
  30.     this.$axios.get(this.$settings.BASE_URL + '/home/banner/').then(res => {
  31.       console.log(res.data)
  32.       if (res.data.code == 100) {
  33.         this.img_list = res.data.data
  34.       } else {
  35.         this.$message(res.data.msg)
  36.       }
  37.     }).catch(res => {
  38.       this.$message('轮播图服务器异常，请稍后再试')
  39.     })
  40.   }
  41. }
  42. </script>
  44. <style scoped>
  45. .el-carousel__item {
  46.   height: 400px;
  47.   min-width: 1200px;
  48. }
  50. .el-carousel__item img {
  51.   height: 400px;
  52.   margin-left: calc(50% - 1920px / 2);
  53. }
  54. </style>

1.3 Footer组件

  1. <template>
  2.     <div class="footer">
  3.         <ul>
  4.             <li>关于我们</li>
  5.             <li>联系我们</li>
  6.             <li>商务合作</li>
  7.             <li>帮助中心</li>
  8.             <li>意见反馈</li>
  9.             <li>新手指南</li>
  10.         </ul>
  11.         <p>Copyright  luffycity.com版权所有 | 京ICP备17072161号-1</p>
  12.     </div>
  13. </template>
  15. <script>
  16.     export default {
  17.         name: "Footer"
  18.     }
  19. </script>
  21. <style scoped>
  22.     .footer {
  23.         width: 100%;
  24.         height: 128px;
  25.         background: #25292e;
  26.         color: #fff;
  27.     }
  29.     .footer ul {
  30.         margin: 0 auto 16px;
  31.         padding-top: 38px;
  32.         width: 810px;
  33.     }
  35.     .footer ul li {
  36.         float: left;
  37.         width: 112px;
  38.         margin: 0 10px;
  39.         text-align: center;
  40.         font-size: 14px;
  41.     }
  43.     .footer ul::after {
  44.         content: "";
  45.         display: block;
  46.         clear: both;
  47.     }
  49.     .footer p {
  50.         text-align: center;
  51.         font-size: 12px;
  52.     }
  53. </style>

2 前台轮播图功能完成

  1. <template>
  2.   <div class="banner">
  3.     <el-carousel height="400px" :interval="5000" arrow="always">
  4.       <el-carousel-item v-for="item in img_list" :key="item.id">
  5.         <div v-if="item.link.indexOf('http')>-1">
  6.           <a :href="item.link">
  7.             <img :src="item.image" :alt="item.title">
  8.           </a>
  9.         </div>
  10.         <div v-else>
  11.           <router-link :to="item.link">
  12.             <img :src="item.image" :alt="item.title">
  13.           </router-link>
  14.         </div>
  16.       </el-carousel-item>
  17.     </el-carousel>
  18.   </div>
  19. </template>
  21. <script>
  22. export default {
  23.   name: "Banner",
  24.   data() {
  25.     return {
  26.       img_list: []
  27.     }
  28.   },
  29.   created() {
  30.     this.$axios.get(this.$settings.BASE_URL + '/home/banner/').then(res => {
  31.       console.log(res.data)
  32.       if (res.data.code == 100) {
  33.         this.img_list = res.data.data
  34.       } else {
  35.         this.$message(res.data.msg)
  36.       }
  37.     }).catch(res => {
  38.       this.$message('轮播图服务器异常，请稍后再试')
  39.     })
  40.   }
  41. }
  42. </script>
  44. <style scoped>
  45. .el-carousel__item {
  46.   height: 400px;
  47.   min-width: 1200px;
  48. }
  50. .el-carousel__item img {
  51.   height: 400px;
  52.   margin-left: calc(50% - 1920px / 2);
  53. }
  54. </style>

1.4 页面死数据，可以添加跳转链接

  1.     <div class="course">
  2.       <el-row>
  3.         <el-col :span="6" v-for="(o, index) in 8" :key="o" class="course_detail">
  4.           <el-card :body-style="{ padding: '0px' }">
  5.             <img src="http://photo.liuqingzheng.top/2023%2002%2022%2021%2057%2011%20/image-20230222215707795.png"
  6.                  class="image">
  7.             <div style="padding: 14px;">
  8.               <span>推荐课程</span>
  9.               <div class="bottom clearfix">
  10.                 <time class="time">价格：999</time>
  11.                 <el-button type="text" class="button">查看详情</el-button>
  12.               </div>
  13.             </div>
  14.           </el-card>
  15.         </el-col>
  16.       </el-row>
  17.     </div>
  1. // 死数据 的样式
  3. <style scoped>
  4. .time {
  5.   font-size: 13px;
  6.   color: #999;
  7. }
  9. .bottom {
  10.   margin-top: 13px;
  11.   line-height: 12px;
  12. }
  14. .button {
  15.   padding: 0;
  16.   float: right;
  17. }
  19. .image {
  20.   width: 100%;
  21.   display: block;
  22. }
  24. .clearfix:before,
  25. .clearfix:after {
  26.   display: table;
  27.   content: "";
  28. }
  30. .clearfix:after {
  31.   clear: both
  32. }
  34. .course_detail {
  35.   padding: 50px;
  36. }
  37. </style>

3 git介绍和安装

  1. # 代码管理软件
  2. 	git
  3.     svn
  5. # 他们能做的事情---> 咱们用来做代码管理[文件管理]
  6. 	1 帮助开发者合并开发的代码 协同开发
  7.     2 如果出现冲突代码的合并 会提示提交合并代码的开发者 让其解决冲突
  8.     3 代码版本管理
  10. # git 与svn比较
  11. 	svn：集成式管理 服务端挂掉就做不了版本管理 代码合并
  12.     git：分布式管理 服务端挂掉 本地还可以继续做版本管理 代码合并

3.1 git gitee github gitlab

  1. # git：版本管理软件 装在操作系统上 有很多命令
  2. # gitee：远程仓库：有开源代码 也可以有私有代码 通过一个网站可以看到有哪些开源代码 通过网站做一些配置
  3. 	国内最大的开源远程仓库
  4.     小公司---> 使用gitee的私有仓库
  6. # githnb：远程仓库：有开源代码 也可以有私有代码 通过一个网站可以看到有哪些开源代码 通过网站做一些配置
  7. 	国际上最大的开源远程仓库
  9. # bitbucket：只有私有仓库
  10. 	远程代码仓库
  12. # gitlab：公司内部的远程仓库

4 git使用流程

4.1 git软件安装

  1. # 双击 安装软件 一路下一步安装完成
  2. 	任意路径下点右键 多出两个东西
  3.     git bash here 可以操作git
  4.     cmd：也可以操作git
  5.     推荐使用git bash here

4.2 git工作流程

  1. # 三个区
  2. 	工作区  存放文件的地方
  3.     暂存区  工作区的变更 提交到暂存区
  4.     版本库 暂存区的内容 提交到版本库
  6. # 三个区相互操作

5 git常用命令

  1. # 1 文件夹想被git管理 文件夹作为仓库
  2. 	# 先来到某个文件夹下敲
  3.     git init  # 初始化仓库 当前文件夹多出 .git 文件夹 这个文件夹不要删 如果删除 这就不是git仓库了 之前的版本再也找不回来了 也不能被git管理
  5.     git init xxx  # 在上一级敲
  7. # 2 查看文件变化 在git所在文件夹下 [只看暂存区和工作区]
  8. 	git status
  9.     # 看到有两种颜色
  10.     	红色：工作区变化了 但是没有提交到暂存区
  11.         绿色：已经提交到暂存区 没有提交到版本库
  12.         没有：所有东西都在版本库中了[所有文件都被git管理起来了]
  14. # 3 把工作区变更提交到暂存区
  15. 	git add 文件夹
  16.     git add .  # 当前路径下所有变更都提交
  18. # 4 把暂存区所有内容 提交到版本库作为一个版本
  19. 	git commit -m '提交了几几版本'
  21. # 5设置作者（全局，局部）
  22. 	# 全局的意思是当前操作系统下所有仓库，提交到版本库时，都用这个作者
  23.     # 局部只针对于当前仓库
  24.   git config --global user.email "306334678@qq.com"
  25.   git config --global user.name "liuqingzheng"
  27. # 6 查看版本库版本信息
  28. 	git log
  29.     git reflog   # 更精简一些
  31. ------了解
  32. # 7 把工作区的变更，回退  【还没有放到暂存区】
  33. 	-增加的内容，删除
  34. 	git checkout .
  35. # 8 把暂存区，拉回到工作区[由绿变红]
  36. 	git reset HEAD
  37. ------- 了解   
  39. # 9 回到某个版本
  40. 	-只要被版本管理了，可以回退到任意版本
  41.     git reset --hard 版本号
  43. # 总结：
  44. 	记住的：
  45.     	git add
  46.         git commit -m
  47.         git reset --hard 版本号
  48.    会用：
  49. 		git init
  50.     	git status
  51.         git log
  52.         git reflog
  54.    了解：
  55. 		git checkout .
  56.     	git reset HEAD
  57.     	git config --global user.email "306334678@qq.com"
  59.   """
  60. 1）有红色信息(工作区有内容)，就执行 add
  61. 2）全绿信息(内容全部在暂存区)，才执行 commit
  62. 3）只有被版本库控制的代码，才能被监听，所以可以回滚到任何一个版本
  63. 空文件夹不会被git记录
  64. """

6 git忽略文件

  1. # 咱们项目中，有些文件，或文件夹不想被git管理
  2. 	-比如：
  3.     	-node_models
  4.         -.idea
  5.         -xx.pyc  # python 的编译文件
  7. # 使用步骤
  8. 	-1 在仓库目录下  .git 所在目录下   新建  .gitignore
  9.     -2 在里面写忽略文件
  10.     	mode_models
  11.         .idea
  12.         *.pyc
  13.         *.log
  14.     -3 写的就会被忽略
  16.     -4 已经被管理过的不会被忽略
  18. # 忽略文件写法
  19. 文件或文件夹名：代表所有目录下的同名文件或文件夹都被过滤
  20. /文件或文件夹名：代表仓库根目录下的文件或文件夹被过滤
  22. 例如：
  23. a.txt：项目中所有a.txt文件和文件夹都会被过滤
  24. /a.txt：项目中只有根目录下a.txt文件和文件夹会被过滤
  25. /b/a.txt：项目中只有根目录下的b文件夹下的a.txt文件和文件夹会被过滤
  26. *x*：名字中有一个x的都会被过滤（*代表0~n个任意字符）
  27. 空文件夹不会被提交，空包会被提交，包可以被提交（包中有一个init空文件）

前台主页功能-前台轮播图功能完成-git介绍和安装-git使用流程-git常用命令-git忽略文件的更多相关文章

  1. Flask实战第54天：cms删除轮播图功能完成

    后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id ...

  2. Flask实战第53天：cms编辑轮播图功能完成

    后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...

  3. 利用axure软件实现app中的轮播图功能

    1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...

  4. 基于Swiper 2.7.6实现的带缩略图功能的轮播图

    非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk

  5. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  6. 潭州课堂25班：Ph201805201 django 项目 第二十三课 文章主页 轮播图前端实现 热门新闻推荐实现 详情页实现 (课堂笔记）

    前台代码 // 在static/js/news/index.js文件中 $(function () { // 新闻列表功能 let $newsLi = $(".news-nav ul li& ...

  7. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  8. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  9. Flutter学习五之网络请求和轮播图的实现

    上期讲到了,怎样实现一个下拉刷新和加载更多的列表,数据更新,需要使用到网络请求,在flutter中,怎样实现一个网络请求呢?官方使用的是dart io中的HttpClient发起的请求,但HttpCl ...

  10. HTML+CSS使用swiper快速生成最简单、最快捷、最易看懂的轮播图

    1.  在网页顶部输入swiper.com.con,进入swiper官网 2.   点击" API文档",获取轮播图代码的地方 3.   点击左侧"swiper初始化&q ...

随机推荐

  1. C-03\浮点数转换与编码和补码

    工程生成文件格式了解(常用) 工具 文件 作用 vc++6.0 .dsw 最高级别的配置文件,记录了整个工作空间的配置信息,是一个纯文本的文件,创建新项目时自动生成 vc++6.0 .dsp 配置文件 ...

  2. JAVA虚拟机18---方法调用

    1.简介 方法调用并不等同于方法中的代码被执行,方法调用阶段唯一的任务就是确定被调用方法的版本(即调用哪一个方法),暂时还未涉及方法内部的具体运行过程.在程序运行时,进行方法调用是最普遍.最频繁的操作 ...

  3. JAVA虚拟机05-内存溢出示例(jdk1.8)

    1.JAVA虚拟机堆内存溢出OutOfMemoryError 1.1设置参数 -Xms20m -Xmx20m -XX:+HeapDumpOnOutOfMemoryError 最小堆的大小20m 最大堆 ...

  4. Html音频播放代码

    页面代码: <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.min.js&quo ...

  5. STM32F4库函数初始化系列：串口DMA接收

    1 u8 _data1[4]; 2 void Configuration(void) 3 { 4 USART_InitTypeDef USART_InitStructure; 5 DMA_InitTy ...

  6. RocketMQ - 消费者概述

    消费流程 消费者组: 一个逻辑概念,在使用消费者时需要指定一个组名.一个消费者组可以订阅多个Topic. 消费者实例: 一个消费者组程序部署了多个进程,每个进程都可以称为一个消费者实例. 订阅关系: ...

  7. CSU2022-2023C语言期中考试机试

    卡在出线概率了.40%,没想到遍历时反了,我去. 1.时钟加法 题目描述 小南最近迷上了各种形式的加法,例如时钟加法,时钟加法是指给定一个当前时间,其形式为h:m:s,计算加上n秒后新的时间.你能帮他 ...

  8. JZOJ 4212. 【五校联考1day2】我想大声告诉你

    题目 解析 设 \(f_{i,j}\) 表示 \(i+1..n\) 个人能受到 \(j\) 次攻击的概率 因为选人出局的顺序是无所谓的,所以我们设从 \(1..n\) 依次选人出局 那么转移时需要分类 ...

  9. Iceberg 数据治理及查询加速实践

    数据治理 Flink 实时写入 Iceberg 带来的问题 在实时数据源源不断经过 Flink 写入的 Iceberg 的过程中,Flink 通过定时的 Checkpoint 提交 snapshot ...

  10. 超声和免疫学指标的特征能否反映RA临床缓解的表型？[EULAR2015_THU0121]

    超声和免疫学指标的特征能否反映RA临床缓解的表型?   THU0121 DO THE IMMUNOLOGICAL AND ULTRASOUND CHARACTERISTICS REFLECT THE ...