一颗小豆子 / zh-CN 小豆几一时兴起创建的站!请多多指教 Mon, 09 Nov 2020 18:48:35 +0800 Mon, 09 Nov 2020 18:48:35 +0800 欢迎访问小豆子的站点 /index.php/archives/1/ /index.php/archives/1/ Fri, 11 Sep 2020 21:23:00 +0800 小豆子 headPortrait1.jpg

这是我创建的第一个站点。日常更新自己带的学习的笔记,还有会放一点使用的工具和脚本。请多多指教啦。
本人计算机科学与技术专业,大四准程序猿。兴趣爱好比较单调,只有打打游戏 看看番 追偶像 管人单推人。平时喜欢整一些新奇的玩意。请多指教啦!

[scode type="green"]这是俺的友链啦,有愿意赏脸可以联系下我哈。QQ:1048893418
本站名称:一颗小豆子
本站地址:/
本站logo:/usr/files/img/headImg/headPortrait.png
简介:我是一颗可爱的小豆子
[/scode]

]]>
1 /index.php/archives/1/#comments /index.php/feed/archives/1/
12.施工中:Vue路由 /index.php/archives/59/ /index.php/archives/59/ Mon, 09 Nov 2020 18:48:35 +0800 小豆子 还在想怎么写呢!

]]>
0 /index.php/archives/59/#comments /index.php/feed/archives/59/
11.Vue全局API /index.php/archives/58/ /index.php/archives/58/ Sat, 31 Oct 2020 16:50:00 +0800 小豆子 Vue.directive

vue中可以通过使用内置指令例如v-开头的指令,也可以通过自定义指令来进行自定义的指令。使用时使用v-加上自己定义的名字就能调用。参数按照顺序,第一个参数固定为使用自定义指令的被绑定元素(el),剩下的按照调用时给的依次对应。

<script>
//自定义全局指令
    //window.onload=function(){document.getElementById('search').focus()}
    //参数1是名称,参数2是对象,身上有指令相关的函数
    Vue.directive('focus',{
     ? ?bind:function (el) {//每当指令绑定到元素上时,会立即执行一次,只执行一次
     ? ? ? ?//注意在每个函数中第一个参数永远是el,表示被绑定的指令的那个元素,这个el参数是原生的js对象
     ? ? ? ?//el.focus()//无效是因为只是绑定并没有插入渲染
     ?  },//绑定时
     ? ?inserted:function (el) {//表示元素 插入到Dom中执行,只执行一次
     ? ? ? ?el.focus()
     ?  },//插入时
     ? ?update:function () {//当组件VNode更新的时候会执行,可能会出发多次
  
     ?  }//更新时
    })
</script>

Vue.filter

vue中可以通过自定义过滤器对需要的内容进行处理。使用时使用|加上自己定义的过滤器名字就能调用。参数按照顺序,第一个参数固定为使用自定义过滤器的内容,剩下的按照调用时给的依次对应。

<script>
//全局过滤器
    Vue.filter('dataFormat',function (dataStr,text) {
 ? ? ? ?return dataStr+text
 ?  })
</script>

Vue.extend

vue中可以基于Vue构造器创建Vue子类。

<script>
 ? ?var vue2=Vue.extend({
 ? ? ? ?data(){
 ? ? ? ? ? ?return {title:'success'}
 ? ? ?  }
 ?  })
</script>

Vue.set

Vue.set可以向响应式对象添加一个属性。例如下面的例子,我给vm对象中的obj中,使用Vue.set添加了一个b属性,obj.b是能同时在页面上渲染响应的。

<script>
    var vm = new Vue({
 ? ? ?el:'#app',
 ? ? ?data:{
 ? ? ? ?a:'我是根级响应属性a',
 ? ? ? ?obj:{}
 ? ?  },
 ?  })
 ? ?Vue.set(vm.obj,'b','我是Vue.set添加的响应属性obj.b')
</script>

其他

目前还有Vue.set、Vue.mixin等几个没有写,一个是没有完全理解,二十Vue.mixin不推荐在应用代码中使用。

有兴趣可以去官方文档中查看。

]]>
0 /index.php/archives/58/#comments /index.php/feed/archives/58/
笔记经验中的内容请点击进入小分类中查看 /index.php/archives/55/ /index.php/archives/55/ Tue, 27 Oct 2020 11:33:00 +0800 小豆子 0 /index.php/archives/55/#comments /index.php/feed/archives/55/ 3.bean dao service servlet /index.php/archives/57/ /index.php/archives/57/ Wed, 21 Oct 2020 00:29:25 +0800 小豆子 servlet在项目中起到一个通过dao包查询封装数据到bean,并发送到前台的功能。

Bean:

1.存放来自于数据库的数据。2.存放来自客户端的数据(表单提交)
Bean中要有对应表单/数据库查询的内容属性,变量名应该与数据库属性名一致
Bean中的每一个变量应该要有getset方法。

Dao:

负责创建数据库连接,并且查询。绝大多数条件查询语句就写在这里。讲查询到的内容封装到Bean对象,并且添加到list中List<Bean>

service:

对应界面上的操作,增删改查,调用对应的Dao

Servlet:

1.接受用户请求,进行处理(doget/dopost)调用service,得到数据

2.做出响应(HTML):通过PrintWriter out = response.getWriter();通过out输出HTML代码
        doGet/doPost中的参数(HttpServletRequest request, HttpServletResponse response)
]]>
0 /index.php/archives/57/#comments /index.php/feed/archives/57/
10.Vue生命周期(钩子函数) /index.php/archives/56/ /index.php/archives/56/ Wed, 21 Oct 2020 00:20:00 +0800 小豆子 比起讲解,直接看比较好,毕竟说起来太麻烦了。

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
 ? ?<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    //vm创建
 ? ?var vm = new Vue({
 ? ? ? ?el: '#app',
 ? ? ? ?data: {
            vmMsg:'success',
        },
 ? ? ? ?methods: {},
 ? ? ? ?filters: {},// 定义私有过滤器
 ? ? ? ?directives: {},// 自定义私有指令
        watch:{},//监听器
        computed:{},//计算
 ? ? ? ?//接下载是生命周期
 ? ? ? ?beforeCreate() {},//初始化vm(vue自带的函数),第一个生命周期函数,表示实例完全初始化出来前,调用执行
 ? ? ? ?created(){},//初始化vm(用户定义的函数)第二个生命周期函数,在create中data和methods都已经初始化好了
 ? ? ? ?beforeMount(){},//将要挂载:这时遇到的第三个生命周期函数,表示模板已在内存中经编译完成(内存中),但是尚未把模板渲染到页面中去
 ? ? ? ?mounted(){},//第四个生命周期函数,表示内存中的模板已经真实的挂载到页面中,页面已经可以看到渲染好的页面
 ? ? ? ?//接下载是运行中的事件(when data change)
 ? ? ? ?beforeUpdate(){},//这时候表示我们的界面还没被更新,但是数据已经更新了
 ? ? ? ?updated(){}//执行时候页面和data数据。更新完成,页面·内存dom树·数据保持一致
        //摧毁两个不写了beforeDestroy(){},destroyed(){}
 ?  })
</script>
</body>
</html>
]]>
0 /index.php/archives/56/#comments /index.php/feed/archives/56/
2.数据库 /index.php/archives/54/ /index.php/archives/54/ Wed, 21 Oct 2020 00:06:00 +0800 小豆子 首先,安装数据库MySql(点连接有教程,安装包自己下把。推荐5.5。低版本和高版本的驱动不一样,需要注意。)

关于一些数据库小问题解决:

数据库服务:
右键我的电脑->管理->服务和应用->服务->MySql,启动

显示版本:
select version();

更新时区(有时候报错查不到东西可能是这个问题):
set global time_zone='+8:00';

自动启动SSL问题:
在网址url后面加上:?useSSL=false
问号是用来传值的,自己看怎么用,只有一个就行,多个属性用&连接

编码问题:
?useUnicode=true&characterEncoding=UTF-8
问号是用来传值的,自己看怎么用,只有一个就行,多个属性用&连接

数据库驱动:

Mysql5.5:
mysql-connector-java-5.1.43-bin.jar

对应的驱动为:com.mysql.cj.jdbc.Driver

Mysql8.8:
mysql-connector-java-8.0.12.jar

对应的驱动为:com.mysql.jdbc.Driver

数据库配置:

BaseDao.java

在文件中这几处需要修改:

private static final String DRIVER = "com.mysql.cj.jdbc.Driver";//对应的驱动
private static final String URL = "jdbc:mysql://localhost:3306/hdjd?useSSL=false";//数据库对应位置
private static final String USER = "root";//数据库账户
private static final String PWD = "root";//数据库密码···

数据库创建:

smbms_db.sql

记得先自己创建对应的数据库:

CREATE SCHEMA `hdjd` DEFAULT CHARACTER SET utf8 ;
use hdjd;

编码sql文件里有写,但是推荐自己创建时注意下。

以上基本内容就完成了。

/usr/files/scsx

]]>
0 /index.php/archives/54/#comments /index.php/feed/archives/54/
1.生产实习开发环境 /index.php/archives/53/ /index.php/archives/53/ Tue, 20 Oct 2020 00:35:00 +0800 小豆子 jsp+servlet+ajax+json(eclipse+tomcat+mysql)

环境版本

比较推荐的是:

* java 1.8
* tomcat 8.0
* mysql 5.5

据说比较稳定,是很多开发公司喜欢用的环境。(~我也没开发过,也不知道好不好用,反正我有好多问题和问号。~)

创建项目

事不宜迟,可以创建项目了,类型为web中的dynamic web project

Java Resources: 保存后端java内容
WebContent: 保存前端jsp内容

jsp页面所有ISO编码一律改成utf-8
创建时自动修改功能设置:Window->Preferences->Web->HTML files/JSP files->Encoding->utf-8

配置环境

然后配置使用的jdk和tomcat

java:
file->Build Path->Configure Build Path
在弹出的窗口中找到Java Build Path->Libraries->add libraries->JRE System Library->添加1.8

tomcat:
Window->Preferences->Server->Runtime Environments
Apache->Tomcat v8.0->Tomcat installation directory(tomcat安装路径)

然后回到之前配置java的地方,添加tomcat:
file->Build Path->Configure Build Path
在弹出的窗口中找到Java Build Path->Libraries->add libraries->Server Runtime->将之前的tomcat8.0添加进去

web.xml添加

右键项目->JAVA EE Tools->Generate Deployments Descriptor Stub
修改web.xml内容,删除测试内容,添加自己需要的内容

模板样式

供应商管理系统.zip

]]>
0 /index.php/archives/53/#comments /index.php/feed/archives/53/
0.目录 /index.php/archives/52/ /index.php/archives/52/ Tue, 20 Oct 2020 00:00:00 +0800 小豆子 本次生产实习,我将学到的知识点和我觉得重要的东西整理在下面,以下是目录。部分代码将放到附件页面讲解。

目录

1.生产实习开发环境

2.数据库

3.3.bean dao service servlet

4.好帮手JSON

5.SQL检索语句

6.Servlet页面请求(ajax)

7.SQL条件查询

一起生产实习的大家辛苦了。

有需要可以回来看看。

]]>
0 /index.php/archives/52/#comments /index.php/feed/archives/52/
作业3:Vue计算器 /index.php/archives/51/ /index.php/archives/51/ Sat, 03 Oct 2020 11:05:00 +0800 小豆子
  • 这是第一份,之后会增加东西,都会放在压缩包里,测试地址会是最新的一版。文件里面注释全部写好了,便于理解,展示页面还没有css并且比较乱难以阅读----2020.10.2
    测试地址:
  • https://vue.magicbeans001.work/vue/calView.html

    • 这是第二份,更新了开方和求根,更新了界面,添加了css----2020.10.9
      测试地址:

    https://vue.magicbeans001.work/vue/calView1.html

    代码下载:

    vue3.zip

    代码内容(第一份):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/vue.js"></script>
    </head>
    
    <body>
    
    
    <div id="app">
        <h1>欢迎使用小豆子没有css的计算器</h1>
        <p>别问,问就是懒,只会抄css</p>
        <p>第一次使用请按CE按钮清除测试数据</p>
    
        <!-- 上课讲的组件,使用的template模板方法 -->
        <!-- 我在当中使用了':list'来绑定vm1中的resList,并把它作为名为list的变量传回去了. -->
        <!-- 在组件中通过props:['list']获取了传过来的list,在赋值给data(这当中有点问题不大的小问题,所以我建议先ce全部清空) -->
        <res-show :list="resList"></res-show>
    
        <!-- 计算器部分 :
            lastStr上一次计算的表达式,上一次的计算结果也会转换为字符串放在lastStr中.
                可以直接在文本框中修改,并且使用了watch监听,来显示长度.
            calStrLen表达式长度,主要用来测试发现问题用的
            showNum上一次计算结果
            result计算的结果(用来保存当次计算结果,会在计算结束清零,来进行下次计算)
        -->
        <div>
            <input type="text" v-model:value="calStr" />
            <br>
            上一次表达式为:{{lastStr}}
            <br />
            表达式长度为:{{calStrLen}}
            <br />
            结果为:{{showNum}}
            <br />
            用于测试的result值:{{result}}----//我发现这个值的渲染有问题,是在方法结束后,所以大多都是0
            <br />
    
            <!-- 喜闻乐见的绑定add(str)方法,按钮绑定带传值的方法,直接付给lastStr字符串末尾 -->
            <button @click="add('1')">1</button>
            <button @click="add('2')">2</button>
            <button @click="add('3')">3</button><br />
            <button @click="add('4')">4</button>
            <button @click="add('5')">5</button>
            <button @click="add('6')">6</button><br />
            <button @click="add('7')">7</button>
            <button @click="add('8')">8</button>
            <button @click="add('9')">9</button><br />
            <button @click="add('0')">0</button><br />
    
            <button @click="add('+')">+</button>
            <button @click="add('-')">-</button>
            <button @click="add('*')">*</button>
            <button @click="add('/')">/</button>
            <button @click="add('(')">(</button>
            <button @click="add(')')">)</button><br />
    
            <!-- del进行calStr字符串最后一个的删除,同时处理calStrLen长度(主要用来检查错误用的) -->
            <button @click="del">C</button>
            <!-- 重置为初始状态,全部重新赋值 -->
            <button @click="delAll">CE</button>
            <!-- 计算结果,注释在下面 -->
            <button @click="cal">=</button>
            <br />
        </div>
    </div>
    
    
    <!-- 上面用到的模板循环输出组件中的数组 -->
    <template id='show1'>
        <div>
            <table>
                <tr>
                    <!-- 组件的resList -->
                    <td>历史结果为:</td>
                    <td v-for="num in resList" :key="num">{{num}}<span>||</span></td>
                </tr>
            </table>
            <span>-----//我发现组件传值用data在list添加数据没问题,但在清空出了问题,我用了watch监听</span>
            <br /><br />
            <!-- 单纯用来查错用的,下面这里显示的是vm1的数组 -->
            <span>用于测试的vm1的list:{{list}}</span>
            <br /><br />
        </div>
    </template>
    
    
    <script>
        // 定义组件,我发现为啥组件要定义在vm上面,不然vm有时候不显示
        // 知道的和我讲下呗!!!!!!!!!!!!!!!!!!!!!!!!!
        Vue.component('res-show',{
            props:['list'],//传值,接受:list="resList"传过来的值
            template:'#show1',
            data(){
                return{
                    resList:this.list,
                    // 讲传过来的值赋予resList
                }
            },
            methods:{},
            watch:{
                list(newVal,oldVal){
                    this.resList=newVal
                    // 因为传值后更新有点小问题
                    // 1.一开始有测试数组情况 和 有之前计算的历史记录情况 ,在这两个情况清空,再计算时组件的resList不更新了
                    // 2.但我发现每次props一直是刷新的
                    // 3.所以我想到了使用watch监听,一旦修改就重新赋值(性能方面不知道有啥问题)
                }
            }
        })
    
        // 一般路过的vm1创建
        var vm1 = new Vue({
            el: '#app',
            data: {
                showNum:'',//保存上次的结果
                lastStr:'',//保存上次的表达式
                calStr:'',//现在的表达式
                calStrLen:0,//现在的表达式的长度
                result:0,//现在当次计算的结果保存在这里,主要用于传值计算和清零准备下次运算,会赋值给showNum和push进resList
                resList:["这是我","用来测试的","字符串"]//保存历史结果的数组,就和里面的玩意一样,我用来测试组件传值的
            },
            methods: {
                add(str){
                    //将对应按钮的值放在字符串后面
                    this.calStr+=str
                    // 长度当然要加一位,主要是我显示在页面用来查错的
                    this.calStrLen=this.calStr.length
                },
                del(){
                    // 长度0的时候当然不能删除,不然删的我人都要没了
                    if(this.calStr.length>0){
                        // 在菜鸟教程页面找的字符串处理方法,顺带推荐下网址,用来查资料的
                        // https://www.runoob.com
                        // substr截取字符串substr(start,end)
                        // star开始位置,end结束位置
                        this.calStr=this.calStr.substr(0,this.calStr.length-1)
                        // 长度当然要刷新,不然我瞅啥
                        this.calStrLen=this.calStr.length
                    }else{
                        // 没字符串就不给删
                        alert("不能删了哦")
                    }
                },
                delAll(){
                    // 消失吧数据!
                    // 全部重置全部清空
                    this.resList=[]
                    this.calStr=''
                    this.calStrLen=0
                    this.result=0
                },
                cal(){
                    // 计算当然查看是不是有数据,没有就不做,我也懒,没有数据的话就重置几个和表达式有关的数据,防止有问题
                    if(this.calStr==''||this.calStr==null){
                        alert("表达式为空哦")
                        this.calStr=''
                        this.calStrLen=0
                        this.result=0
                        return;
                    }
    
                    // 这里偷懒了,应为想了想判断字符串表达式太麻烦了,有很多内容
                    // 用了一个相对方便的方法eval(this.calStr);也是查到的
                    // eval可以用来讲给的字符串参数直接计算
                    // 那么就好办了,计算没问题就执行结果,计算有问题捕获错误就行
                    try{
                        this.result=eval(this.calStr);//计算字符串,并保存结果
                        if(this.result==Infinity){//解决1/0问题,结果是Infinity,这是js的类型
                            // 基本数据类型:Undefined、Null、Boolean、Number、String,Symbol
                            // 引用数据类型 :Object
                            // 还有个Nan:Not a number不算类型,计算有问题时候会显示
                            alert("求求你放过孩子吧,给你重置了")
                            this.calStr=''
                            this.calStrLen=0
                        }else{//其他计算问题都可以在这里加...不过大多数都可以捕获,所以事情很少...我好懒懒得写
                            this.resList.push(this.result)//当然要放到数组里显示
                            this.showNum=this.result//用于页面显示
                            this.lastStr=this.calStr//用于展示上一次的表达式
                            alert("结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                            this.calStr=this.result.toString()
                            // 拿出来说下,毕竟result是number类型(js类型),没有长度没法watch,不加变字符串也没啥问题,加了就能显示字符串长度
                        }
                        this.result=0//结果清零,这就是为啥页面上一直是0的原因
                    }catch(e){
                        //TODO handle the exception
                        // 偷懒偷懒偷懒偷懒偷懒偷懒
                        // 摸鱼真开心
                        alert("公式有误")
                        this.result=0
                    }
                }
            },
            filters: {},// 定义私有过滤器
            directives: {},// 自定义私有指令
            watch:{
                // 监控长度
                calStr(newVal,oldVal){
                    this.calStrLen=newVal.length
                }
            },
            computed:{},
            // 这个下面的不用看,自己写的模板....
            //接下载是创建时的事件
            beforeCreate() {},//初始化vm(vue自带的函数),第一个生命周期函数,表示实例完全初始化出来前,调用执行
            created(){},//初始化vm(用户定义的函数)第二个生命周期函数,在create中data和methods都已经初始化好了
    
            beforeMount(){},//将要挂载:这时遇到的第三个生命周期函数,表示模板已在内存中经编译完成(内存中),但是尚未把模板渲染到页面中去
            mounted(){},//第四个生命周期函数,表示内存中的模板已经真实的挂载到页面中,页面已经可以看到渲染好的页面
    
            //接下载是运行中的事件(when data change)
            beforeUpdate(){},//这时候表示我们的界面还没被更新,但是数据已经更新了
            updated(){}//执行时候页面和data数据。更新完成,页面·内存dom树·数据保持一致
        })
    </script>
    </body>
    </html>

    ....

    代码内容(第二份):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/vue.js"></script>
        <link rel="stylesheet" href="./css/bootstrap-3.3.7.css">
    </head>
    
    <body>
    <!-- 更新了开方和求根,更新了界面,添加了css -->
    
    <div id="app">
        <!-- 上课讲的组件,使用的template模板方法 -->
        <!-- 我在当中使用了':list'来绑定vm1中的resList,并把它作为名为list的变量传回去了. -->
        <!-- 在组件中通过props:['list']获取了传过来的list,在赋值给data(这当中有点问题不大的小问题,所以我建议先ce全部清空) -->
        <res-show :list="resList"></res-show>
    
        <!-- 计算器部分 :
            lastStr上一次计算的表达式,上一次的计算结果也会转换为字符串放在lastStr中.
                可以直接在文本框中修改,并且使用了watch监听,来显示长度.
            calStrLen表达式长度,主要用来测试发现问题用的
            showNum上一次计算结果
            result计算的结果(用来保存当次计算结果,会在计算结束清零,来进行下次计算)
        -->
        <div>
            <input type="text" class="form-control" style="background-color: lightpink" v-model:value="calStr" />
            <br />
            <table class="table table-bordered table-hover table-striped">
                <tr><td>上一次表达式为:{{lastStr}}</td></tr>
                <tr><td>表达式长度为:{{calStrLen}}</td></tr>
                <tr><td>结果为:{{showNum}}</td></tr>
            </table>
            <div>
                <!-- 喜闻乐见的绑定add(str)方法,按钮绑定带传值的方法,直接付给lastStr字符串末尾 -->
                <div style="float: left; margin-right: 40px;">
                    <button class="btn btn-primary" @click="add('1')">1</button>
                    <button class="btn btn-primary" @click="add('2')">2</button>
                    <button class="btn btn-primary" @click="add('3')">3</button><br />
                    <button class="btn btn-primary" @click="add('4')">4</button>
                    <button class="btn btn-primary" @click="add('5')">5</button>
                    <button class="btn btn-primary" @click="add('6')">6</button><br />
                    <button class="btn btn-primary" @click="add('7')">7</button>
                    <button class="btn btn-primary" @click="add('8')">8</button>
                    <button class="btn btn-primary" @click="add('9')">9</button><br />
                    <button class="btn btn-primary" @click="add('0')">0</button><br />
                </div>
                <div style="float: left; margin-right: 40px;">
                    <button class="btn btn-primary" @click="add('+')">+</button>
                    <button class="btn btn-primary" @click="add('-')">-</button>
                    <button class="btn btn-primary" @click="add('*')">*</button>
                    <button class="btn btn-primary" @click="add('/')">/</button><br /><br />
                    <button class="btn btn-primary" @click="add('(')">(</button>
                    <button class="btn btn-primary" @click="add(')')">)</button>
                    <!-- Math.sqrt(x)用来计算开根,但是pow(a,b)能计算任意a的b次方根 -->
                    <button class="btn btn-primary" @click="powR(2)">x?</button>
                    <button class="btn btn-primary" @click="powR(0.5)">√</button><br />
                </div>
                <div style="float: left; margin-right: 40px;">
                    <!-- del进行calStr字符串最后一个的删除,同时处理calStrLen长度(主要用来检查错误用的) -->
                    <button class="btn btn-primary" @click="del">C</button><br /><br />
                    <!-- 重置为初始状态,全部重新赋值 -->
                    <button class="btn btn-primary" @click="delAll">CE</button><br /><br />
                    <!-- 计算结果,注释在下面 -->
                    <button class="btn btn-primary" @click="cal">=</button><br /><br />
                    <br />
                </div>
            </div>
    
        </div>
    </div>
    
    
    <!-- 上面用到的模板循环输出组件中的数组 -->
    <template id='show1'>
        <div>
            <table class="table table-bordered table-hover table-striped">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">欢迎使用小豆子计算器</h3>
                    </div>
                    <tr>
                        <!-- 组件的resList -->
                        <td>历史结果为:</td>
                        <td v-for="num in resList" :key="num">{{num}}</td>
                    </tr>
                </div>
            </table>
            <br />
        </div>
    </template>
    
    
    <script>
        // 定义组件,我发现为啥组件要定义在vm上面,不然vm有时候不显示
        // 知道的和我讲下呗!!!!!!!!!!!!!!!!!!!!!!!!!
        Vue.component('res-show',{
            props:['list'],//传值,接受:list="resList"传过来的值
            template:'#show1',
            data(){
                return{
                    resList:this.list,
                    // 讲传过来的值赋予resList
                }
            },
            methods:{},
            watch:{
                list(newVal,oldVal){
                    this.resList=newVal
                    // 因为传值后更新有点小问题
                    // 1.一开始有测试数组情况 和 有之前计算的历史记录情况 ,在这两个情况清空,再计算时组件的resList不更新了
                    // 2.但我发现每次props一直是刷新的
                    // 3.所以我想到了使用watch监听,一旦修改就重新赋值(性能方面不知道有啥问题)
                }
            }
        })
    
        // 一般路过的vm1创建
        var vm1 = new Vue({
            el: '#app',
            data: {
                showNum:'',//保存上次的结果
                lastStr:'',//保存上次的表达式
                calStr:'',//现在的表达式
                calStrLen:0,//现在的表达式的长度
                result:0,//现在当次计算的结果保存在这里,主要用于传值计算和清零准备下次运算,会赋值给showNum和push进resList
                resList:[]//保存历史结果的数组,就和里面的玩意一样,我用来测试组件传值的
            },
            methods: {
                add(str){
                    //将对应按钮的值放在字符串后面
                    this.calStr+=str
                    // 长度当然要加一位,主要是我显示在页面用来查错的
                    this.calStrLen=this.calStr.length
                },
                del(){
                    // 长度0的时候当然不能删除,不然删的我人都要没了
                    if(this.calStr.length>0){
                        // 在菜鸟教程页面找的字符串处理方法,顺带推荐下网址,用来查资料的
                        // https://www.runoob.com
                        // substr截取字符串substr(start,end)
                        // star开始位置,end结束位置
                        this.calStr=this.calStr.substr(0,this.calStr.length-1)
                        // 长度当然要刷新,不然我瞅啥
                        this.calStrLen=this.calStr.length
                    }else{
                        // 没字符串就不给删
                        alert("不能删了哦")
                    }
                },
                delAll(){
                    // 消失吧数据!
                    // 全部重置全部清空
                    this.resList=[]
                    this.calStr=''
                    this.calStrLen=0
                    this.result=0
                },
                cal(){
                    // 计算当然查看是不是有数据,没有就不做,我也懒,没有数据的话就重置几个和表达式有关的数据,防止有问题
                    if(this.calStr==''||this.calStr==null){
                        alert("表达式为空哦")
                        this.calStr=''
                        this.calStrLen=0
                        this.result=0
                        return;
                    }
        
                    // 这里偷懒了,应为想了想判断字符串表达式太麻烦了,有很多内容
                    // 用了一个相对方便的方法eval(this.calStr);也是查到的
                    // eval可以用来讲给的字符串参数直接计算
                    // 那么就好办了,计算没问题就执行结果,计算有问题捕获错误就行
                    try{
                        this.result=eval(this.calStr);//计算字符串,并保存结果
                        if(this.result==Infinity){//解决1/0问题,结果是Infinity,这是js的类型
                            // 基本数据类型:Undefined、Null、Boolean、Number、String,Symbol
                            // 引用数据类型 :Object
                            // 还有个Nan:Not a number不算类型,计算有问题时候会显示
                            alert("求求你放过孩子吧,给你重置了")
                            this.calStr=''
                            this.calStrLen=0
                        }else{//其他计算问题都可以在这里加...不过大多数都可以捕获,所以事情很少...我好懒懒得写
                            this.resList.push(this.result)//当然要放到数组里显示
                            this.showNum=this.result//用于页面显示
                            this.lastStr=this.calStr//用于展示上一次的表达式
                            alert("表达式结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                            this.calStr=this.result.toString()
                            // 拿出来说下,毕竟result是number类型(js类型),没有长度没法watch,不加变字符串也没啥问题,加了就能显示字符串长度
                        }
                        this.result=0//结果清零,这就是为啥页面上一直是0的原因
                    }catch(e){
                        //TODO handle the exception
                        // 偷懒偷懒偷懒偷懒偷懒偷懒
                        // 摸鱼真开心
                        alert("公式有误")
                        this.result=0
                    }
                },
                powR(num){
                    this.cal()
                    this.result=Math.pow(this.showNum,num)
                    this.resList.push(this.result)//当然要放到数组里显示
                    this.lastStr=this.showNum+"^"+num//用于展示上一次的表达式,从showNum拿数据来做表达式
                    this.showNum=this.result//用于页面显示
                    alert("开方结果为"+this.result)//页面提示,其实我是用来检查是否进try了
                    this.calStr=this.result.toString()
                    this.result=0
        
                }
            },
            watch:{
                // 监控长度
                calStr(newVal,oldVal){
                    this.calStrLen=newVal.length
                }
            }
        })
    </script>
    </body>
    </html>
    ]]>
    0 /index.php/archives/51/#comments /index.php/feed/archives/51/
    作业2:随机数处理 /index.php/archives/50/ /index.php/archives/50/ Sun, 27 Sep 2020 22:55:00 +0800 小豆子 代码下载:

    vue2.zip

    测试地址:

    https://vue.magicbeans001.work/vue/fin2_1.html

    代码内容:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/vue.js"></script>
        <link rel="stylesheet" href="./css/bootstrap-3.3.7.css" />
        <link rel="stylesheet" href="./css/animate.css" />
    </head>
    <style>
        #range{
            display: inline;
        }
    </style>
    <body>
    <div id="app">
        <header>
            <div class="panel-body form-inline">
                <label>
                    MIN:
                    <input type="number" class="form-control" v-model="min" placeholder="最小值" @change="compareNum()">
                </label>
    
                <label>
                    MAX:
                    <input type="number"  class="form-control" v-model="max" placeholder="最大值" @change="compareNum()">
                </label>
    
                <label>
                    生成个数:
                    <input type="number"  class="form-control" v-model="num" min="1" max="10" placeholder="个数" @change="compareNum()">
                </label>
                <button class="btn btn-primary" @click="runAdd">生成带重复</button>
                <button class="btn btn-primary" @click="runRandom">生成不重复</button>
                <form>
                    <h6>是否重复</h6><br>
                    <input type="radio" name="sex" v-model="flag" value="1">可重复<br>
                    <input type="radio" name="sex" v-model="flag" value="0">不重复<br>
                    <button class="btn btn-primary" @click.prevent="run1">开始生成</button>
                </form>
            </div>
        </header>
        现在随机数范围为:{{min}}到{{max}}
        <br>
        最大值:
        <input id="range" type="range" v-model="min" :style="rangeSet" @change="compareNum()">
        <br>
        最小值:
        <input id="range" type="range" v-model="max" :style="rangeSet" @change="compareNum()">
        <br>
        <table >
            <tr v-for="item in list" :key="item">
                <td>{{item}}</td>
            </tr>
        </table>
    </div>
    
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                min:"0",
                max:"1",
                num:"1",
                flag:"1",
                list:["以下是随机的结果:","这是测试语句防止出错"],
                rangeSet:{display:'inline',min:0,max:1000,step:1,width:'25%'}
            },
            methods:{
                // Math.random();
                // 返回介于 0(包含) ~ 1(不包含) 之间的一个随机数
                // 1.  0-x之间的随机数:
                // Math.round(Math.random()*x);
                // 2.  x至y之间的随机数
                // Math.round(Math.random()*(y-x)+x);
                // 3.  1-x之间的随机数:
                // Math.ceil(Math.random()*x);
                addNum(){
                    var ran=Math.random()*(this.max-this.min)+Math.floor(this.min)
                    var ranNum=Math.round(ran)
                    // console.log(ran)
                    // console.log(ranNum)
                    return ranNum;
                },
                run1(){
                    if(this.flag==1){
                        this.runAdd()
                    }else if(this.flag==0){
                        this.runRandom()
                    }else{
                        alert("请勾选一个")
                        this.flag="1"
                    }
                },
                runAdd(){
                    console.log("runAdd()")
                    this.list=["以下是随机的结果:"]
                    for(var i=0;i<this.num;i++){
                        var ranNum=this.addNum()
                        this.list.push(ranNum)
                    }
                },
                runRandom(){
                    console.log("runRandom()")
                    this.list=["以下是随机的结果:"]
                    for(var i=0;i<this.num;i++){
                        var ranNum=this.addNum()
                        var flag=this.list.find((value) => { 
                            if(value == ranNum) { 
                                // console.log(value+"value")
                                // console.log(ranNum+"ranNum")
                                return true;
                            }else{
                                return false;
                            }
                        })
                        if(flag===undefined){
                            this.list.push(ranNum)
                        }else{
                            i--
                            continue;
                        }
                    }
                },
                compareNum(){
                    if(this.max<=this.min){
                        alert("最小值必须小于最大值")
                        if(this.max==0){
                            this.max++
                        }
                        this.min=this.max-1
                    }
                    if(this.num<1){
                        alert("你觉得我能生成负数个随机数?搁着虚空对线呢?????")
                        this.num=1
                    }
                    if(this.num>this.max-this.min){
                        alert("你这个数量都不够我随机数分的,过分了啊。直接给你改了")
                        this.num=this.max-this.min
                    }
                }
            }
        })
    </script>
    </body>
    </html>
    ]]>
    0 /index.php/archives/50/#comments /index.php/feed/archives/50/