Публичный аккаунт: MarkerHub (подпишитесь, чтобы узнать больше о ресурсах проекта)
репозиторий кода блога:GitHub.com/маркер-хаб/о…
видео проекта в блоге:воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо
Каталог документации по разработке:
(блог) 1. Построение архитектуры проекта, инициализация домашней страницы
(блог) 4. Настройте метку Freemaker, чтобы реализовать заполнение данными главной страницы блога.
(блог) 5. Заполнение классификации блога, логика регистрации входа
(блог) 6. Публикация в блогах коллекций, настройки пользовательского центра
(блог) 7. Асинхронное уведомление о сообщениях, настройка деталей
(блог) 8. Разработка поисковой системы для блогов, выбор фона
(блог) 9. Мгновенная разработка группового чата, записи чата и т. д.
Чтобы просмотреть vueblog проекта разделения клиентской и серверной частей, нажмите здесь:Супер подробно! 4 часа на разработку блог-проекта SpringBoot+vue, разделяющего интерфейс и серверную часть! !
Пользовательские теги freemarker
Первое, что нужно получить, это верхние данные. Чтобы все узнали больше о freemarker, мы определяем тег freemarker, а затем используем этот тег для отображения наших данных.
Чтобы настроить метку freemarker, вам необходимо реализовать этот интерфейс и переопределить метод execute:
public interface TemplateDirectiveModel extends TemplateModel {
public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body) throws TemplateException, IOException;
}
Вышеуказанные параметры следующие:
-
env: системные переменные среды, обычно используемые для вывода связанного содержимого, например, Writer out = env.getOut().
-
params: объект, передаваемый пользовательской меткой, его ключ = имя параметра пользовательской метки, значение value — тип TemplateModel, а TemplateModel — тип интерфейса, обычно мы используем интерфейс TemplateScalarModel, чтобы заменить его, чтобы получить значение String , например TemplateScalarModel.getAsString(); Конечно, есть и другие часто используемые альтернативные интерфейсы, такие как TemplateNumberModel для получения числа, TemplateHashModel и так далее.
-
loopVars Переменные подстановки цикла.
-
body используется для обработки содержимого пользовательского тега, такого как содержимое, обрабатываемое <@mydirective>; когда тег имеет формат <@mydirective>, body=null.
Однако на самом деле это немного хлопотно вести наш бизнес напрямую с этими параметрами.Чтобы лучше использовать этот интерфейс, нам нужно инкапсулировать еще один слой.Здесь я имею в виду инкапсуляцию этого интерфейса из проекта mblog.
com.example.common.template
-
DirectiveHandler
-
TemplateDirective
-
TemplateModelUtils
Я скопировал вышеуказанные 3 класса в проект mblog, поэтому я изменил путь к пакету
исходный путь mblog:
С приведенной выше инкапсуляцией нам нужно только наследовать TemplateDirective, чтобы определить шаблон метки, переписать getName() и выполнить (обработчик DirectiveHandler); вы можете видеть, что в методе execute есть обработчик, и этот обработчик нам очень легко использовать.
Давайте определим тег для списка блогов com.example.templates.PostsTemplate.
@Component
public class PostsTemplate extends TemplateDirective {
@Autowired
PostService postService;
@Override
public String getName() {
return "posts";
}
@Override
public void execute(DirectiveHandler handler) throws Exception {
Long categoryId = handler.getLong("categoryId", 0);
int pn = handler.getInteger("pn", 1);
int size = handler.getInteger("size", 10);
String order = handler.getString("order", "created");
Page page = new Page(pn, size);
IPage results = postService.paging(page, categoryId, order);
handler.put(RESULTS, results).render();
}
}
Как видно из кода выше, наша метка имеет несколько параметров: categoryId, pn, size, order. Затем он инкапсулируется в два класса: Page и QueryWrapper, которые являются классами инкапсуляции в mybatis-plus, которые используются для подкачки и запроса параметров.
Чтобы выполнить кэширование, здесь мы не передаем QueryWrapper напрямую, а передаем параметры напрямую, чтобы мы могли использовать параметры в качестве ключа кэша.
Давайте подробно рассмотрим метод postService.paging(Page page, Long categoryId, String order).
@Override
@Cacheable(cacheNames = "cache_post", key = "'page_' + #page.current + '_' + #page.size " +
"+ '_query_' +#categoryId + '_' + #order")
public IPage paging(Page page, Long categoryId, String order) {
QueryWrapper wrapper = new QueryWrapper<Post>()
.eq(categoryId != 0, "category_id", categoryId)
.orderByDesc(order);
IPage<PostVo> pageData = postMapper.selectPosts(page, wrapper);
return pageData;
}
Приведенный выше интерфейс снова вызывает интерфейс сопоставления и использует аннотацию кэша @Cacheable для указания кэшированного результата.Ключом являются параметры pn, size и categoryId страницы, порядка. Выше я определил тег шаблона, который нужно использовать на странице и настроить в freemarker, поэтому мы определяем FreemarkerConfig.
- com.example.config.FreemarkerConfig
@Configuration
public class FreemarkerConfig {
@Autowired
private freemarker.template.Configuration configuration;
@Autowired
private ApplicationContext applicationContext;
@PostConstruct
public void setUp() {
configuration.setSharedVariable("posts", applicationContext.getBean(PostsTemplate.class));
}
}
Страницы используют теги
Что ж, тег freemarker генерируется таким образом, и мы будем использовать его на странице ниже. Имя тега, которое мы определили, — это сообщения, а результат — результаты. Итак, верхний модуль, мы пишем это:
- templates/index.ftl
Полученный результат выглядит следующим образом:
Главная Боковая панель — Темы этой недели (продолжение)
В последнем задании мы доделали интерфейс данных, который обсуждали на этой неделе:
Но мы не вывели наши данные на страницу.Вообщем по логике надо написать аякс на странице,а потом вызывать этот интерфейс для вывода данных.Теперь мы научились настраивать фримаркер,я думаю удобнее определить метку, поэтому здесь давайте изменим интерфейс и изменим интерфейс на тег шаблона.
хорошо, давайте прямо сейчас установим процесс и разберемся:
-
Сначала определите шаблон HotsTemplate, который наследует TemplateDirective
-
Переопределить методы getName и выполнить
-
Затем настройте тег инъекции в FreemarkerConfig.
-
Используйте теги на странице
/**
* 本周热议
*/
@Component
public class HotsTemplate extends TemplateDirective {
@Autowired
RedisUtil redisUtil;
@Override
public String getName() {
return "hots";
}
@Override
public void execute(DirectiveHandler handler) throws Exception {
Set<ZSetOperations.TypedTuple> lastWeekRank = redisUtil.getZSetRank("last_week_rank", 0, 6);
List<Map<String, Object>> hotPosts = new ArrayList<>();
for (ZSetOperations.TypedTuple typedTuple : lastWeekRank) {
Map<String, Object> map = new HashMap<>();
map.put("comment_count", typedTuple.getScore());
map.put("id", redisUtil.hget("rank_post_" + typedTuple.getValue(), "post:id"));
map.put("title", redisUtil.hget("rank_post_" + typedTuple.getValue(), "post:title"));
hotPosts.add(map);
}
handler.put(RESULTS, hotPosts).render();
}
}
Содержимое команды execute выше перемещено из интерфейса, который горячо обсуждался на этой неделе. Затем freemarkerConfig.setUp
configuration
.
setSharedVariable
(
"hots"
,
applicationContext
.
getBean
(
HotsTemplate
.
class
));
С этой строкой кода страница готова к использованию.
- templates/inc/right.ftl
<dl class="fly-panel fly-list-one">
<dt class="fly-panel-title">本周热议</dt>
<@hots>
<#list results as post>
<dd>
<a href="jie/detail.html">${post.title}</a>
<span><i class="iconfont icon-pinglun1"></i> ${post.comment_count}</span>
</dd>
</#list>
</@hots>
</dl>
Хорошо, содержание этого домашнего задания закончено. Нам нужно научиться быстро настраивать теги freemarker. Движок шаблонов freemarker по-прежнему остается относительно популярным движком страниц.
(над)
Указатель статей MarkerHub: