DengXJ
/
hexo-blog-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Packaged project.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
12 MiB
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
hexo-blog-dist/2020/10/07/study/index.html

514 lines
26 KiB
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 元数据 -->
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.ico">
<title>英语随身学 | YongKJ</title>
<meta name="author" content="yongkj" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telphone=no, email=no" />
<meta name="description" itemprop="description" content="A pure heart and few desires." />
<meta name="description" content="《英语随身学》又是我们组花了很多心思和精力完成的一个学习小网站。这个学习网站主要提供一种有效的学习方式帮助初学者学习国际音标、练习标准的英语发音、提高英语听力水平以及积累英语词汇等等。可以让初学者做到随时随地、循序渐进学习英语。 关于这个网站的开发，我们也是一如既往地做一些从未做过、看起来有点挑战的功能，因此也遇到了一些比较棘手的问题，譬如：如何在互联网上搜集到想要的英语学习资源？如何解决词汇">
<meta property="og:type" content="article">
<meta property="og:title" content="英语随身学">
<meta property="og:url" content="https://blog.yongkj.cn/2020/10/07/study/index.html">
<meta property="og:site_name" content="YongKJ">
<meta property="og:description" content="《英语随身学》又是我们组花了很多心思和精力完成的一个学习小网站。这个学习网站主要提供一种有效的学习方式帮助初学者学习国际音标、练习标准的英语发音、提高英语听力水平以及积累英语词汇等等。可以让初学者做到随时随地、循序渐进学习英语。 关于这个网站的开发，我们也是一如既往地做一些从未做过、看起来有点挑战的功能，因此也遇到了一些比较棘手的问题，譬如：如何在互联网上搜集到想要的英语学习资源？如何解决词汇">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://blog.yongkj.cn/2020/10/07/study/20201023191414.png">
<meta property="article:published_time" content="2020-10-07T11:13:04.000Z">
<meta property="article:modified_time" content="2023-05-30T04:26:16.734Z">
<meta property="article:author" content="yongkj">
<meta property="article:tag" content="英语">
<meta property="article:tag" content="学习">
<meta property="article:tag" content="翻译">
<meta property="article:tag" content="词汇">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://blog.yongkj.cn/2020/10/07/study/20201023191414.png">
<meta name="twitter:site" content="@Candiinya">
<link rel="alternate" href="atom.xml" type="application/atom+xml">
<!-- 站点验证相关 -->
<!-- 样式表文件 -->
<link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
<link rel="stylesheet" id="highlight-css" href="/css/highlight.min.css" type="text/css" media="all">
<link rel="stylesheet" id="fontawe-css" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
<link rel="stylesheet" id="nprogress-css" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
<!-- 不得不预先加载的一些JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode_js@1.0.0/qrcode.min.js"></script>
<meta name="generator" content="Hexo 5.2.0"></head>
<body class="custom-background">
<div id="kratos-wrapper">
<div id="kratos-page">
<div id="kratos-header">
<div class="nav-toggle"><a class="kratos-nav-toggle js-kratos-nav-toggle"><i></i></a></div>
<header id="kratos-header-section">
<div class="container">
<div class="nav-header">
<div class="color-logo"><a href="/">YongKJ</a></div>
<nav id="kratos-menu-wrap">
<ul id="kratos-primary-menu" class="sf-menu">
<li><a href="/"><i class="fa fa-home"></i>首页</a></li>
<li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
<li>
<a><i class="fa fa-link"></i>链接</a>
<ul class="sub-menu">
<li><a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/">软件俱乐部</a></li>
<li><a target="_blank" rel="noopener" href="http://pocketyun.yongkj.cn/pocketyun/">袖珍网盘吧</a></li>
<li><a target="_blank" rel="noopener" href="http://study.yongkj.cn/">英语随身学</a></li>
</ul>
</li>
<li><a href="/atom.xml"><i class="fa fa-rss"></i>RSS 订阅</a></li>
<li><a href="/about/"><i class="fa fa-paper-plane"></i>关于我</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div class="kratos-start kratos-hero-2">
<!-- <div class="kratos-overlay"></div> -->
<div class="kratos-cover kratos-cover-2 text-center">
<div class="desc desc2 animate-box">
<a href="/"><h2>YongKJ</h2><br><span>勇往直前，永不言弃</span></a>
</div>
</div>
</div>
<div id="kratos-blog-post">
<div class="container">
<div class="row">
<div id="main">
<section class="col-md-8">
<article>
<div class="kratos-hentry kratos-post-inner clearfix">
<header class="kratos-entry-header">
<h1 class="kratos-entry-title text-center">英语随身学</h1>
<div class="kratos-post-meta text-center">
<span>
<i class="fa fa-calendar"></i> 2020-10-07
<i class="fa fa-folder"></i> 分类于 <a class="label-link" href="/categories/%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86/">项目经历</a>
<i class="fa fa-user"></i> 作者 yongkj
<i class="fa fa-edit"></i>
1140
字
</span>
</div>
</header>
<div class="kratos-post-content">
<hr />
<img src="/2020/10/07/study/20201023191429.png" class="" title="20201023191429.png">
<p>《英语随身学》又是我们组花了很多心思和精力完成的一个学习小网站。这个学习网站主要提供一种有效的学习方式帮助初学者学习国际音标、练习标准的英语发音、提高英语听力水平以及积累英语词汇等等。可以让初学者做到随时随地、循序渐进学习英语。</p>
<p>关于这个网站的开发，我们也是一如既往地做一些从未做过、看起来有点挑战的功能，因此也遇到了一些比较棘手的问题，譬如：如何在互联网上搜集到想要的英语学习资源？如何解决词汇的发音功能？如何完成文本的翻译功能？等等。尽管一开始困难重重，但是我们坚信一定可以完成这个学习网站，一直勇往直前，从未轻言放弃！于是，我们学习了很多新的有用的知识，不仅学会了用Java解析网页，获取想要的内容，还学会了申请开发者API接口，使用API接口完成许多有用的功能。</p>
<p>英语随身学——随时随地&amp;循序渐进学习英语！轻松学习26个英语字母的发音/手写、48个国际音标的标准BBC英语音标发音！方便积累大量常用/常考英语词汇、查询陌生单词/翻译英语长难句子及段落！浏览体验有趣的英语文章，了解名人名言、经典谚语和人生格言。</p>
<h2 id="功能特性："><a href="#功能特性：" class="headerlink" title="功能特性："></a><strong>功能特性：</strong></h2><p>1.账号登录、注册功能，并且用户登录要输入验证码，用户登录之后三天内无需登录。</p>
<p>2.英语字母的学习，提供26个英语字母发音表/手写展示图</p>
<p>3.国际音标的学习，练习48个国际音标/标准BBC英语音标发音</p>
<p>4.收录大量英语词汇，包括日常生活常用词汇、高中英语教材词汇以及大学英语四级词汇，满足日常学习需求</p>
<p>5.翻译功能，可以查询陌生单词，翻译英语长难句子、段落，翻译中文文本为英文</p>
<p>6.文章功能，可以浏览各类英语学习文章、英语学习视频</p>
<p>7.每日一句英语，了解名人名言、经典谚语和人生格言</p>
<p>8.单词本功能，可以添加、删除查询过的陌生英语单词，方便学习、记忆陌生词汇</p>
<h2 id="用到的知识："><a href="#用到的知识：" class="headerlink" title="用到的知识："></a><strong>用到的知识：</strong></h2><p>1.本项目同样采用前后端分离的开发方式，前端和后端通过json数据进行交互</p>
<p>2.前端使用了 JQuery 框架 + Ajax 异步刷新来解析、渲染json数据，响应式布局主要采用 Bootstrap3 框架来完成</p>
<p>3.后端则使用了 Maven 来创建 SpringBoot 项目，方便管理各种 Java 包的依赖关系</p>
<p>4.另外，也使用了 SpringBoot 来整合 SSM 框架（Spring + SpringMVC + MyBatis），有助于提高后端开发效率</p>
<p>5.本项目还引用了开源项目 <a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=304">DPlayer</a>（支持弹幕的 HTML5 视频播放器），用于实现网页的视频播放功能</p>
<p>6.网页的粒子背景效果使用了 GSAP（专业的 web 动画库）来完成</p>
<p>7.后台的数据存储主要采用开源的Mariadb数据库来完成</p>
<p>官方网站：<a target="_blank" rel="noopener" href="http://study.yongkj.cn/">http://study.yongkj.cn/</a></p>
</div>
<div class="kratos-copyright text-center clearfix">
<h5>本作品采用 <a rel="license nofollow" target="_blank" href="http://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
</div>
<footer class="kratos-entry-footer clearfix">
<div class="post-like-donate text-center clearfix" id="post-like-donate">
<a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
<div class="share-wrap" style="display: none;">
<div class="share-group">
<a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-qq"></i>
</div>
</a>
<a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-star"></i>
</div>
</a>
<a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-weixin"></i>
</div>
<div class="share-int">
<div class="qrcode" id="wechat-qr"></div>
<p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
</div>
</a>
<a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-weibo"></i>
</div>
</a>
<a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-twitter"></i>
</div>
</a>
</div>
<script type="text/javascript">
$(()=>{
new QRCode("wechat-qr", {
text: "https://blog.yongkj.cn/2020/10/07/study/",
width: 150,
height: 150,
correctLevel : QRCode.CorrectLevel.H
});
});
function share(dest) {
const qqBase = "https://connect.qq.com/widget/shareqq/index.html?";
const weiboBase = "https://service.weibo.com/share/share.php?";
const qzoneBase = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
const facebookBase = "https://www.facebook.com/sharer/sharer.php?";
const twitterBase = "https://twitter.com/intent/tweet?";
const hostUrl = "https://blog.yongkj.cn/2020/10/07/study/";
const title = "「英语随身学」";
const excerpt = `
《英语随身学》又是我们组花了很多心思和精力完成的一个学习小网站。这个学习网站主要提供一种有效的学习方式帮助初学者学习国际音标、练习标准的英语发音、提高英语听力水平以及积累英语词汇等等。可以让初学者做到随时随地、循序渐进学习英语。
...`;
let _URL;
switch (dest) {
case "qq" : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy"; break;
case "weibo" : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt; break;
case "qzone" : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy"; break;
case "facebook" : _URL = facebookBase+"u="+hostUrl; break;
case "twitter" : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl; break;
}
window.open(_URL);
};
</script>
</div>
</div>
<div class="footer-tag clearfix">
<div class="pull-left">
<i class="fa fa-tags"></i>
<a class="tag-none-link" href="/tags/%E5%AD%A6%E4%B9%A0/" rel="tag">学习</a>, <a class="tag-none-link" href="/tags/%E7%BF%BB%E8%AF%91/" rel="tag">翻译</a>, <a class="tag-none-link" href="/tags/%E8%8B%B1%E8%AF%AD/" rel="tag">英语</a>, <a class="tag-none-link" href="/tags/%E8%AF%8D%E6%B1%87/" rel="tag">词汇</a>
</div>
<div class="pull-date">
<span>最后编辑：2023-05-30</span>
</div>
</div>
</footer>
</div>
<nav class="navigation post-navigation clearfix" role="navigation">
<div class="nav-previous clearfix">
<a title=" 世界真细小" href="/2020/09/03/mini-word/">&lt; 上一篇</a>
</div>
<div class="nav-next clearfix">
<a title=" 坐在巷口的那对男女" href="/2020/10/23/seat/">下一篇 &gt;</a>
</div>
</nav>
</article>
</section>
</div>
<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
<aside id="krw-about" class="widget widget-kratos-about clearfix">
<div class="photo-background"></div>
<div class="photo-wrapper clearfix">
<div class="photo-wrapper-tip text-center">
<img class="about-photo" src="/images/avatar.webp" />
</div>
</div>
<div class="textwidget">
<p class="text-center">A pure heart and few desires.</p>
</div>
</aside>
<!-- Moved to about.ejs -->
<aside id="krw-categories" class="widget widget-categories clearfix">
<h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
<ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Java%E5%AD%A6%E4%B9%A0/">Java学习</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AC%AC%E4%B8%80%E6%AC%A1/">第一次</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0/">英语学习</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9D%A2%E8%AF%95%E7%A7%AF%E7%B4%AF/">面试积累</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9F%B3%E4%B9%90%E7%A9%BA%E9%97%B4/">音乐空间</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86/">项目经历</a><span class="category-list-count">3</span></li></ul>
</aside>
<aside id="krw-tags" class="widget widget-kratos-tags clearfix">
<h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
<div class="tag-clouds">
<a href="/tags/MySQL/" style="font-size: 0.6em;">MySQL</a> <a href="/tags/apility/" style="font-size: 0.6em;">apility</a> <a href="/tags/bus/" style="font-size: 0.6em;">bus</a> <a href="/tags/city/" style="font-size: 0.6em;">city</a> <a href="/tags/comfort/" style="font-size: 0.6em;">comfort</a> <a href="/tags/communication/" style="font-size: 0.6em;">communication</a> <a href="/tags/contribute/" style="font-size: 0.6em;">contribute</a> <a href="/tags/convenient/" style="font-size: 0.6em;">convenient</a> <a href="/tags/develop/" style="font-size: 0.6em;">develop</a> <a href="/tags/education/" style="font-size: 0.6em;">education</a> <a href="/tags/enhance/" style="font-size: 0.6em;">enhance</a> <a href="/tags/facility/" style="font-size: 0.6em;">facility</a> <a href="/tags/flight/" style="font-size: 0.6em;">flight</a> <a href="/tags/foreign/" style="font-size: 0.6em;">foreign</a> <a href="/tags/free/" style="font-size: 0.6em;">free</a> <a href="/tags/hello/" style="font-size: 0.6em;">hello</a> <a href="/tags/improve/" style="font-size: 0.8em;">improve</a> <a href="/tags/information/" style="font-size: 0.6em;">information</a>
</div>
</aside>
<aside id="krw-posts" class="widget widget-kratos-poststab">
<h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
<div class="tab-content">
<ul class="list-group">
<a class="list-group-item" href="/2023/06/04/mysql-interview-questions/"><i class="fa fa-book"></i> MySQL 面试题</a>
<a class="list-group-item" href="/2021/02/09/java-io-stream/"><i class="fa fa-book"></i> 输入输出流</a>
<a class="list-group-item" href="/2021/02/08/java-class-loading/"><i class="fa fa-book"></i> 类加载</a>
<a class="list-group-item" href="/2021/02/07/java-annotation/"><i class="fa fa-book"></i> 注解</a>
<a class="list-group-item" href="/2021/02/06/java-reflect/"><i class="fa fa-book"></i> 反射</a>
</ul>
</div>
</aside>
</section>
</div>
</div>
</div>
<footer>
<div id="footer">
<div class="kr-tool text-center">
<div class="tool">
<div class="box search-box">
<a href="/search/">
<span class="fa fa-search"></span>
</a>
</div>
<div class="box theme-box" id="darkmode-switch">
<span class="fa fa-adjust"></span>
</div>
</div>
<div class="box gotop-box">
<span class="fa fa-chevron-up"></span>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 footer-list text-center">
<ul class="kratos-social-icons">
<li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
<li><a target="_blank" rel="nofollow" href="https://twitter.com/Candiinya"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" rel="nofollow" href="https://github.com/yongkj"><i class="fa fa-github"></i></a></li>
<li><a target="_blank" rel="nofollow" href="/atom.xml"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="kratos-copyright">
<div>
<li>&copy; 2023 yongkj 版权所有.</li>
<li>本站已运行<span id="span_dt">Loading...</span></li>
</div>
<div>
<li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
<li>Made with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by <a href="https://candinya.com" target="_blank" rel="nofollow">Candinya</a>.</li>
</div>
<div>
<li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
<li>Hosted on <a href="https://www.yongkj.cn" target="_blank">勇往直前</a></li>
</div>
<div>
</div>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.js"></script>
<script>const notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));</script>
<div>
<canvas id="snow"></canvas>
<script async type="text/javascript" src="/js/snow.min.js"></script>
</div>
<script async src="/js/candy.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>
<script defer src="/js/kr-dark.min.js"></script>
</body>
</html>