CSS基础

已于 2023-04-23 16:17:51 修改
阅读量188 收藏
点赞数
文章标签： css 前端 javascript
于 2023-04-23 16:16:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56242172/article/details/130303597
版权

1.css书写

text-align        文本格式（居中、靠最右）

border: 1px slategray solid;        边框线设置

border-collapse:collapse;        边框单实线

:first-child        选择同类型标签的第1个标签

:last-child        选择同类型标签的最后1个标签

:nth-child(x)        选择同类型标签的第x个标签

th        表格头

td        表格行的单个单元格

2.axios使用

npm install axios   下载

import axios from 'axios';       引用

        get请求：

axios({
            method:'get',
            url:'http://114.67.241.121:8080/product/list'
        }).then(res => {
            console.log(res);
            this.products = res.data.data
            console.log(this.products);
        })

        post请求:

        (1)登录注册

handleSubmit() {

        axios.post('http://114.67.241.121:8088/user/login' , null , {
          params:{
            username : this.username,
            password : this.password
          }
        }).then(res=>{
              
              console.log(res)
              if(res.data.code==200){
                this.session = res.data.data.token

                //传session
                sessionStorage.setItem('token',this.session)

                //清除token缓存
                // sessionStorage.removeItem('token',this.session)
                this.$router.push({path:'/index'})
              }
              else {
                this.msg='用户名或密码错误'
                // alert('用户名或密码错误')
              }
              
        })
  
      },

         （2）get方法获取学生信息

//在created当中调用方法
created(){
        this.getStud()
      },


// 调用的方法
 //获取stu_list
        getStud(){
            axios.get('http://114.67.241.121:8088/stu/list',{
                headers:{
                    Authorization:this.token
                }
            }).then(res=>{
              
              console.log(res)
              this.lists = res.data.data 
        })
        },

        （3）新增学生

//data当中定义form表单
form:{
            stuid:'',
            stuno:'',
            stuname:'',
            stumajor:'',
            stugrade:'',
            stuaddess:'',
            stunative:''
          }

//新增stu
        AddStu(){
            const data = {
                
                    stuid:this.form.stuid,
                    stuno:this.form.stuno,
                    stuname:this.form.stuname,
                    stumajor:this.form.stumajor,
                    stugrade:this.form.stugrade,
                    stuphone:this.form.stuphone,
                    stuaddess:this.form.stuaddess,
                    stunative:this.form.stunative,
                
            }
            axios.post('http://114.67.241.121:8088/stu/add',data,
            {
                headers:{
                    Authorization:this.token
                }
            }
            ).then(res=>{
              if(res.data.code == 200){
                alert('添加成功')
                //关闭弹窗
                this.dialogFormVisible = false;
                this.$router.go(0);
              }
              
              
        })
        },

        （4）修改

//更新数据
        Update() {
            // console.log(row);
            const data = {
                
                stuid:this.form.stuid,
                stuno:this.form.stuno,
                stuname:this.form.stuname,
                stumajor:this.form.stumajor,
                stugrade:this.form.stugrade,
                stuphone:this.form.stuphone,
                stuaddess:this.form.stuaddess,
                stunative:this.form.stunative,
            
        }
        axios.post('http://114.67.241.121:8088/stu/edit',data,
        {
            headers:{
                Authorization:this.token
            }
        }
        ).then(res=>{
          if(res.data.code == 200){
            alert('修改成功')
            //关闭弹窗
            this.dialogFormVisible = false;
            this.$router.go(0);
          }
          
          
    })
        },

        (5)删除

//删除
           Delete(s){
            this.stuid = s.stuid
            axios.post('http://114.67.241.121:8088/stu/del',null,{
                headers:{
                    Authorization:this.token
                },
                params:{
                    stuid:this.stuid
                }
            },
            ).then(res=>{
              console.log(this.form.stuid);
              alert('删除成功');
              this.lists = res.data.data;
              this.$router.go(0);
        })
           },

实验代码心得

Login

<template>
    <div class="login">
      <h1>登录</h1>
        <div class="form-group">
            <span  class="msg">{{msg}}</span><br>
          <label for="username">用户名</label>
          <input name= 'username' type="username" id="username" v-model="username" required />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input name="password" type="password" id="password" v-model="password" required />
        </div>
        <button  v-on:click="handleSubmit()" type="submit">登录</button>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
// import router from '@/router';
  export default {
    data() {
      return {
        username: '',
        password: '',
        session:'',
        msg:''
      };
    },
    methods: {
      handleSubmit() {

        axios.post('http://114.67.241.121:8088/user/login' , null , {
          params:{
            username : this.username,
            password : this.password
          }
        }).then(res=>{
              
              console.log(res)
              if(res.data.code==200){
                this.session = res.data.data.token
                //传session
                sessionStorage.setItem('token',this.session)
                //清除token缓存
                // sessionStorage.removeItem('token',this.session)
                this.$router.push({path:'/index'})
              }
              else {
                this.msg='用户名或密码错误'
                // alert('用户名或密码错误')
              }
              
        })
  
      },
    },
  };
  </script>
  
  <style scoped>


  .login {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    background-color: #e2f3f9;
    padding: 100px;
    margin: 150px auto;
    border-radius: 10px;
    
  }
  
  .form-group {
    margin-bottom: 10px;
  }
  
  label {
    display: inline-block;
    width: 80px;
  }
  
  input {
    width: 200px;
  }
  
  button {
    width: 100px;
  }

  .msg {
    color: red;
  }
  </style>

Index

<template>
    <div>
        <!-- 弹窗 -->
        <el-button type="text" @click="Show1">新增学生</el-button>

        <el-dialog :title="isEdit?'新增':'修改'" :visible.sync="dialogFormVisible"
        @close="HandClose">
            <el-form :model="{form}">
            <!-- <el-form-item label="id" :label-width="formLabelWidth">
                <el-input v-model="form.stuid" autocomplete="off"></el-input>
            </el-form-item> -->
            <el-form-item label="学号" :label-width="formLabelWidth">
                <el-input v-model="form.stuno" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.stuname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form.stumajor" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年级" :label-width="formLabelWidth">
                <el-input v-model="form.stugrade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="form.stuphone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.stuaddess" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="国际" :label-width="formLabelWidth">
                <el-input v-model="form.stunative" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmmit">确 定</el-button>
        </div>
        </el-dialog>


    
    <el-table
      :data="lists"
      stripe
      style="width: 100%">
      <el-table-column
        prop="stuid"
        label="id">
      </el-table-column>
      <el-table-column
        prop="stuno"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="stuname"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="stumajor"
        label="职位">
      </el-table-column>
      <el-table-column
        prop="stugrade"
        label="年级">
      </el-table-column>
      <el-table-column
        prop="stuphone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="stuaddess"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="stunative"
        label="国籍">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="row">
        <el-button @click="Show2(row.row)" type="text" size="small">修改</el-button>
        <el-button @click="Delete(row.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    
    
</div>
  </template>
  
  <script>
import axios from 'axios';
    export default {
      data() {
        return {

          lists:[],
          //接收session
          token:sessionStorage.getItem('token'),
          dialogTableVisible: false,
          dialogFormVisible: false,
          formLabelWidth: '120px',
          isEdit:true,
          
          form:{
            stuid:'',
            stuno:'',
            stuname:'',
            stumajor:'',
            stugrade:'',
            stuaddess:'',
            stunative:''
          }
        }
      },
      created(){
        this.getStud()
      },
      methods: {
        //更新数据
        Update() {
            // console.log(row);
            const data = {
                
                stuid:this.form.stuid,
                stuno:this.form.stuno,
                stuname:this.form.stuname,
                stumajor:this.form.stumajor,
                stugrade:this.form.stugrade,
                stuphone:this.form.stuphone,
                stuaddess:this.form.stuaddess,
                stunative:this.form.stunative,
            
        }
        axios.post('http://114.67.241.121:8088/stu/edit',data,
        {
            headers:{
                Authorization:this.token
            }
        }
        ).then(res=>{
          if(res.data.code == 200){
            alert('修改成功')
            //关闭弹窗
            this.dialogFormVisible = false;
            this.$router.go(0);
          }
          
          
    })
        },
        //获取stu_list
        getStud(){
            axios.get('http://114.67.241.121:8088/stu/list',{
                headers:{
                    Authorization:this.token
                }
            }).then(res=>{
              
              console.log(res)
              this.lists = res.data.data 
        })
        },
        //逻辑判断
        Show1(){
            //打开弹窗
            this.dialogFormVisible = true;
        },
        Show2(s){
            //打开弹窗
            this.dialogFormVisible = true;
            //变成编辑
            this.isEdit = false;

            this.form.stuid = s.stuid

        },
        //新增stu
        AddStu(){
            const data = {
                
                    stuid:this.form.stuid,
                    stuno:this.form.stuno,
                    stuname:this.form.stuname,
                    stumajor:this.form.stumajor,
                    stugrade:this.form.stugrade,
                    stuphone:this.form.stuphone,
                    stuaddess:this.form.stuaddess,
                    stunative:this.form.stunative,
                
            }
            axios.post('http://114.67.241.121:8088/stu/add',data,
            {
                headers:{
                    Authorization:this.token
                }
            }
            ).then(res=>{
              if(res.data.code == 200){
                alert('添加成功')
                //关闭弹窗
                this.dialogFormVisible = false;
                this.$router.go(0);
              }
              
              
        })
        },
        //提交表单
        handleSubmmit(){
            if(this.isEdit == true){
                this.AddStu();
            }
            else{
                this.Update();
            }
              
           },
           //删除
           Delete(s){
            this.stuid = s.stuid
            axios.post('http://114.67.241.121:8088/stu/del',null,{
                headers:{
                    Authorization:this.token
                },
                params:{
                    stuid:this.stuid
                }
            },
            ).then(res=>{
              console.log(this.form.stuid);
              alert('删除成功');
              this.lists = res.data.data;
              this.$router.go(0);
        })
           },
           //清空表单
           HandClose(){
                //重置表单数据
                this.form = {
                    stuid:'',
                    stuno:'',
                    stuname:'',
                    stumajor:'',
                    stugrade:'',
                    stuphone:'',
                    stuaddess:'',
                    stunative:''
                    };
           }

    },

      
    }
  </script>

  <style>
.el-form-item{
    
    
}
.el-input {
    
    
}


</style>

假装很大佬
关注
Bootstrap【前端开发框架一】
m0_64522859的博客
04-29 922
如需温习上一节内容，请点击下方链接进行跳转。 JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发展史：HTML静态页面---serlvet----jsp问题2：web开发模式发展：模型1 模型2只有静态页面的时候： HTML+css出现servlet之后：可以进行交互模型1：第一代----把所有的代码（java+.
Bootstrap 表单
snowstorm的博客
03-14 880
Bootstrap 将表单内的fieldset、legend、label标签的margin、padding、border等进行了细化设置，其他没啥。 注意： 1、form-contro样式使input、select、textarea样式显示宽度为100%，placeholder的颜色为#999999 2、form-group样式提供了一个margin-bott：15px的底部外边距，用于使每
BootStrap-CSS样式_排版_表单、表单控件
LoveyourselfJiuhao的博客
12-01 2077
1. 基本表单 form样式：默认不显示，基本表单 form-group样式：表单内设置分组 form-control样式：设置控件并绑定控件默认样式 2. 内联表单 form-inline样式：设置为内联排列表单 3. 水平排列表单 form-horizontal样式：设置为水平排列表单 4. 表单支持控件 type="text"：文本框 textarea标签：多行文本框 ...
4.bootstrap的form表单的form-group和form-control的区别与联系
weixin_30906425的博客
10-13 3740
1. form-group一般用于div form-control一般用于置于div中的标签元素，为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”，如： <form role="form"> <div class="form-group"> <input type="email" class="for...
div中class属性的理解
热门推荐
liulang68的博客
07-01 6万+
div 在网页设计中是表示块、区域的意思，比如你在制作一个卖衣服的网页时，把男装和女装各分一个区域这是就可以定义两个div，两个块，class则可以表示你可以给这个块加一些属性啊，比如长和宽，背景颜色什么的，你可以给这些属性取一个名字，class=shuxing就表示你给这个属性的集合取了个shuxing的名称 <div class=nanzhuang>、<div class=nvzhuang> 就可以表示你给男装区域和女装区域定义的属性名，这样你就可以设疑class改变他的属性了
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
CSS学习记录02
serendipity__i的博客
10-11 219
chrome调试工具：快捷键Fn+F12 使用调试工具 ①Ctrl+滚轮可以放大开发者工具代码大小。 ②左边是 HTML元素结构，右边是CSS样式。 ③右边CSS样式可以改动数值（左右箭头或者直接输入)和查看颜色。 ④Ctrl +0复原浏览器大小。 ⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 ⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。 1.Emmet语法 Emmet语法的前身是Zencoding,它使用缩写,来提高htmI/css的编写速度,Vs.
CSS入门基础学习（中）
m0_61886762的博客
11-13 1701
CSS显示模式作用：网页标签特别多，在不同地方用不到相同类型，了解他们的特点可以方便给页面进行布局。元素显示模式就是元素（标签）以什么方式进行显示，例如占一行,一行内可以放多个，HTML元素一般分为块元素和行内元素，两种类型。块元素：常见的块元素：~、、、、、等，其中是最典型的块级元素。下面我们进行书写一些行内块元素来看一下各自的效果样式：结果如图所示：注意：文字类的元素内不能使用块级元素。
初识CSS
LiLi的博客
12-21 597
CSS简介 CSS概念 CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表 CSS文件后缀名为 .css CSS用于HTML文档中元素样式的定义 为什么需要CSS 使用css的目的就是让网页具有美观一致的页面 CSS和HTML之间的关系 1 HTML用于构建网页的结构 2 CSS用于构建HTML元素的样式 3 HTML是页面的内容组成，CSS是页面的表现 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明 选择器通常是您需要改变样式的 HTML
html基础知识
chengxuwa的博客
07-23 1264
Html可以大小写 xhtml只能用小写 Html可以不用结束 xhtml必须有结束标签 <H1>这是html大写</H1>；<h1>这是小写的html</h1>；<h1>这是html；<h1>这是xhtml</h1> Xhtml就是html的严格版 99%的语言都是写在body里面 学习html其实就是学习一堆的标签语言 标签：<div></div><p>&lt...
div 中id和class使用讲解
kele_jichi的博客
03-11 9709
在div 标签中，我们比较常见的属性是id 和class,那么这两个属性有什么区别吗？今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。 首先看看这两个属性在html中是如何使用的。 1.<div id="loading"> </div> 2.<div class="icon"&gt...
bootstarp 的表单控件大小设置和class="form-group"，row使用
chuncui2576的博客
02-07 2371
表单控件都正常的大小。可以通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是： 1、input-sm:让控件比正常大小更小 2、input-lg...
2.4Bootstrap表单
为者常成，行者常至
05-03 1万+
1、基本案例 2、内联表单 3、水平排列的表单 4、被支持的控件 5、
bootstrap表单中样式class=‘form-group’与class='form-control'
azgegiujmm1205713的博客
06-14 1364
{# 一种 #} 用户名： {# 另一种 #} 密码： 转载于:https://www.cnblogs.com/Zhao159461/p/11023640.html
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值