程序员单词

[toc]

演示地址

先说为什么

感觉要提升一下自己的英语了,否则怎么跟妹子混呀
1. 然后就找了一下单词本
2. 然后找到了个600词的,感觉没有发音.然后就想做了个网页展示一下
3. 开始是想搞个简单的就用了thymeleaf 后台的标签 发现跟狗一样坑,
4. 然后果断转jquery的ajax请求 搞完后的参数传递问题搞了半个小时 其实就是”””,
5. 既然jquery都搞了就顺便学了一下vue的简单使用,说实话开始的简单使用和angularJs是差不的,就是后面的那个深入就不同了,我被angular2吓到了至今没有写太多的angular应用,

后台

从文件中读取单词:
这是单词文件
单词获取接口
就是使用

  @RequestMapping("/getword")
    @ResponseBody
    public Object getWord(){

InputStream is=this.getClass().getResourceAsStream("/单词.txt");
 BufferedReader bufferedReader=new BufferedReader(new InputStreamReader(is));
  List<MyWord> list=new ArrayList<MyWord>();
  // 就是使用bufferedReader 读取一行信息,然后进行切词保存到list里面
      try {
            String dan=null;
            Pattern pattern = Pattern.compile("[\\u4E00-\\u9FBF]+"); //使用正则判断一下第一个中文在哪?
             while ((dan=bufferedReader.readLine())!=null){
                System.out.println(dan);


                Matcher matcher= pattern.matcher(dan);
                int i=-1;
                if(matcher.find()){
                    i=matcher.start();
//                   System.out.println(i);

                }
                while(i>=0){
                    if((dan.charAt(i)>='a'&&dan.charAt(i)<='z')||dan.charAt(i)==')'){break;}
                    else i--;
                }
                System.out.println(dan.substring(0,i+1));
                System.out.println(dan.substring(i+1,dan.length()));


                MyWord myWord=null;
                if(dan.charAt(i+1)==' '){
                     myWord=new MyWord(dan.substring(0,i+1), dan.substring(i+2,dan.length()));
                }else  myWord =new MyWord(dan.substring(0,i+1), dan.substring(i+1,dan.length()));

                list.add(myWord);
                }
    return list;

jar路径问题来了

上面的项目一开始是使用的File file=new File("单词.txt"); 然后打包jar 运行的时候找不到文件
明明是本地可以跑的,这个就涉及到jar打包时路径更改问题, 大家可以看一下打包完成的jar 的文件结构即可明白,
我们的解决方案就是使用流this.getClass().getResourceAsStream() 它会从classPath中查找文件 这样就避免了路径问题

• 然后使用 maven clean package命令即可打包(插件的jar 不知道为毛不行)
• 然后上传到服务器中 使用java -jar 包名.jar即可运行
• 有时候端口占有就先ps -aux | grep java使用kill -9 java进程号杀掉java进行即可.

前端

bootstrap+jquery + vue

vue没有用它的http服务是用的jquery的

<div id="app" v-on:onload="initwo">
    <div>{{message}}</div>

    <img class="col" src=""/>

    <table class="table table-striped table-hover">
        <thead><td style="width:3%">序号</td><td style="width: 20%">单词</td><td style="width: 50%">中文</td></thead>
        <tbody>
        <tr v-for="(item,index) in myword" v-on:click="say(item.word)" class="wordtr">
            <td>{{index}}</td>
            <td class="wordtd">{{item.word}}<img src="/imges/sond.png" class="imgtr" style="width: 20px"/></td>
            <td>{{item.info}}</td></tr>
        </tbody>
    </table>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            myword:[],
            message: 'by 郏俊龙',
            msg : null

        },
        created : function () {

// 初始化数据
            this.initwo();
            var self = this;
            self.msg=new SpeechSynthesisUtterance();
            self.msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google US English'; })[0];
            console.info("dfas");
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },
            initwo:function () {
                console.info("init");
                var self = this;
                jQuery.getJSON("./getword",function (data){
                    self.myword=data;
                })
            },

            say:function (str) {
            //语音输出
                console.log(str);
                var self=this;
                self.msg.text=str;
                speechSynthesis.speak(self.msg);
            }

        }
    });
</script>